当前位置：首页>后端>正文

react 实现图片验证码

后端2024-04-30 03:08:22

react 瀹炵幇鍥剧墖楠岃瘉鐮侊紝杩欓噷涓句笁涓緥瀛愶紝閮芥槸鑷繁鎬荤粨鐨勫苟涓旂畝瑕佸垎鏋愪笅涓夌鐨勫尯鍒煃旔煃?br> 馃崠鍚庣鍥剧墖楠岃瘉鐮佹槸浠庤繖閲屾壘鐨勩€備娇鐢ㄧ殑鏄?svg 鏍煎紡! 馃崠

鍚庣node 杩斿洖鍥剧墖楠岃瘉鐮?https://blog.csdn.net/Wick__/article/details/104733193

1.馃崷馃崷鐩存帴鐢╱rl 杩涜缃戠粶璁块棶

const Demo = () =>{
const [url, setUrl] = useState(null)
let u = `http://localhost:8080/getcode`
 useEffect(() => {
        changeCode()
    }, [])
  function changeCode() {
         setUrl(u)
    }
  return (
 <img src={url} alt="楠岃瘉鐮佸浘鐗? onClick={changeCode} />
  )
}

馃馃杩欑鏂规硶寰堢畝鍗曘€備絾鏄敱浜庢槸url 鍙戣捣鐨勮姹傦紝鍥剧墖鍙兘浼氳娴忚鍣ㄧ紦瀛樹笅鏉ワ紝浣嗘槸瀵逛簬鍥剧墖楠岃瘉鐮佹潵璇达紝杩欑涓嶉渶瑕佺紦瀛樸€傝繖绉嶆柟寮忎笉鏄渶濂界殑銆?/p>

娴忚鍣ㄧ紦瀛樻満鍒? https://www.cnblogs.com/chengxs/p/10396066.html

2.馃嵈馃嵈鎶婂悗绔繑鍥炵殑鍥剧墖杞负html 鍏冪礌骞舵覆鏌?/h4>

鍦ㄤ笂杈圭殑妗堜緥鏇存敼涓?,   - 浠ｈ〃鍒犻櫎浠ｇ爜   + 浠ｇ爜澧炲姞鐨勪唬鐮?
鍒╃敤 axios 璇锋眰url

- let u = `http://localhost:8080/getcode`
+ async function changeCode(){
+ const response  = await axios.get("http://localhost:8080/getcode")
+ let v = response['data']
+ if (v) {
+    setUrl(v)
+  }

- <img src={url} alt="楠岃瘉鐮佸浘鐗? onClick={changeCode} />
+ <div dangerouslySetInnerHTML={{__html: url}} onClick={changeCode}</div>

馃馃杩欎釜鏂规硶鍒╃敤瀛楃涓?杞?html 鏉ュ疄鐜?svg 鐨勬覆鏌撱€傝€屼笖閬垮厤缂撳瓨銆備絾鏄張娑夊強鍒板墠鍚庣鐨勮姹傝法鍩熼棶棰樸€傞渶瑕佸湪鍚庣閰嶇疆璇锋眰璺ㄥ煙銆傝繕鏈変竴涓氨鏄?鎶妔vg 娓叉煋涔嬪悗锛岃svg 鏍囩鐨?width 鍜?height 涓嶅お濂芥帶鍒躲€備篃灏辨槸css鏍峰紡鎺у埗姣旇緝楹荤儲銆傚綋鐒堕潪 svg 鏍煎紡鐨勪篃鍙互杩斿洖鐨勩€備富瑕佹槸鐪嬪悗绔敓鎴愪粈涔堝浘鐗囨牸寮忋€?/p>

3. 馃嵀馃嵀鍒╃敤鍚庣杩斿洖鐨?瀛楃涓瞫vg杞?base64 閰嶅悎 img src 瀹岀編锛?/h4>

const CodeImg = ({ toLarger }) => {
    const [url, setUrl] = useState(null)
    // const u = `http://localhost:8080/getcode`
    async function changeCode() {
        
        const response = await axios.get("/getcode" );
        let v = response['data']
        if (v) {
            v = `data:image/svg+xml;base64,${window.btoa(v)}`
            setUrl(v)
        }
        //console.log(response.headers['codesession'])
    }

    useEffect(() => {
        changeCode()
    }, [])

    return (
        // <div className="codeImg" dangerouslySetInnerHTML={{__html: url}} onClick={changeCode} style={{height: toLarger '46px' : '32px'}}></div>
        <img src={url} alt="楠岃瘉鐮佸浘鐗? style={{ height: toLarger '46px' : '32px' }} onClick={changeCode} />
    )
}

鍥剧墖杞琤ase64 锛歨ttps://blog.csdn.net/qq_45832807/article/details/119218975

馃馃馃馃绗笁绉嶆柟寮忔槸涓涓煩鐨勪簡
馃馃浼樼偣:

axios 璇锋眰锛屽悗绔繑鍥?鍥剧墖瀛楃涓?杞琤ase64 宓屽叆鍒?data:image/svg+xml;base64, 鏉ユ帶鍒?img 鐨剆rc灞炴€?/li>
杩欎箞鍋氫篃鐪嬭捣鏉ユ瘮杈冧笓涓氱偣
img 鐨刢ss 鏍峰紡濂芥帶鍒?鏈枃閫氳繃涓€涓?toLarger( boolean绫诲瀷 )鏉ユ帶鍒?img height
console.log(response.headers['codesession']) 杩欒鐨勫瓨鍦ㄦ槸鍥犱负鍒╃敤 axios 杩樺彲浠? 鎺у埗鍚庣瀛樻斁鐨?cookie鎴栬€?sessionID 鍊肩瓑鍏朵粬鍝嶅簲澶翠俊鎭?鍏蜂綋鐨勮鑰呭彲浠ヨ嚜鐢辨嫇灞曘€?br>

瀹岀編.png

$react 实现图片验证码,\color{#228B22}{鑳藉姏鏈夐檺锛屼笉瀵逛箣澶勶紝娆㈣繋鍠锋垜銆傚彲浠ョ殑璇濋『鎵嬬偣涓禐鍚~锛亇,第2张$
$react 实现图片验证码,\color{red}{璀? 绂佹鎶勮锛岃浆杞借鏄庡嚭澶?馃え},第3张$

查看全文

https://www.xamrdz.com/backend/3n41938950.html

1.馃崷馃崷 鐩存帴鐢╱rl 杩涜缃戠粶璁块棶

相关文章：

1.馃崷馃崷鐩存帴鐢╱rl 杩涜缃戠粶璁块棶