涓嶇煡閬撲綘鏈夋病鏈夐亣鍒拌繃杩欑鎯呭喌锛熷～瀹屾敞鍐岃〃鍗曞噯澶囦笂浼犲ご鍍忔椂锛岀綉椤电獊鐒舵彁绀衡€滃浘鐗囦笂浼犲け璐ワ紝璇烽噸璇曗€濃€斺€旂粨鏋滃瘑鐮佹病璁颁綇鍙堝緱閲嶆柊濉竴閬嶏紝琛€鍘嬬洿鎺ユ媺婊★紒杩欏氨鍍忎綘鍦ㄨ秴甯傛帓浜?0鍒嗛挓闃燂紝涓翠粯娆惧彂鐜颁細鍛樼爜澶辨晥蹇呴』鍥炶溅涓婃嬁鎵嬫満锛屼綘璇存皵涓嶆皵锛?/p>

娌′簨鍎垮晩鏈嬪弸浠紝浠婂ぉ鍜变滑灏辨暀澶у鐢‵ormData杩欑帺鎰忓効锛屾妸鏂囧瓧淇℃伅鍜屾枃浠舵墦鍖呮垚"缁勫悎濂楅"涓€璧峰彂璧般€備繚浣犲浼氫箣鍚庯紝澶勭悊娣峰悎鏁版嵁灏辫窡瓒呭競鑷姪缁撹处涓€鏍蜂笣婊戯紒

琛ㄥ崟VS鏂囦欢鑳戒竴璧蜂紶鍚楋紵褰撶劧琛岋紒

浣犲彲鑳借闂細"浼犵粺琛ㄥ崟鍙兘浼犳枃瀛楋紝鎴戠殑鍥剧墖鍜嬪姙锛?杩欏氨鏄疐ormData鍑哄満鐨勬椂鍊欎簡銆傚厔寮熶滑璁颁綇杩欏彞璇濓細鈥?strong>鈥嬪畠灏辨槸涓揩閫掓墦鍖呯锛佲€?/strong>鈥嬫櫘閫氭枃鏈槸鏃ョ敤鍝侊紝鍥剧墖瑙嗛鏄槗纰庡搧锛孎ormData甯綘鍒嗙被瑁呯璐存爣绛撅紝淇濊瘉杩愯緭瀹夊叏銆?/p>

涓句釜鏍楀瓙馃尠锛?/p>

• 浼犵粺蹇€掑崟鍙湁鏂囧瓧锛堣〃鍗曞瓧娈碉級
• FormData鍗囩骇鎴愬甫姘旀场鑶滅殑绠卞瓙锛堟枃浠?琛ㄥ崟鏁版嵁锛?br/> 鐢ㄤ唬鐮佸疄鐜拌秴绾х畝鍗曪細

javascript澶嶅埗
// 鍒涘缓涓€涓瓟娉曞揩閫掔
const form = new FormData();

// 濉炲叆鐢ㄦ埛鍚?/span>
form.append('username', '鍓嶇灏忕櫧');

// 鏀捐繘鐢ㄦ埛澶村儚鍥?/span>
const avatar = document.querySelector('#avatar').files[0];
form.append('user_avatar', avatar);

// 鏈€鍚庤创涓娉ㄦ爣绛?/span>
form.append('remark', '杩欐槸鎴戠涓€娆″皾璇曚笂浼狅紒');

3涓綘蹇呴』鐭ラ亾鐨勫疄鎴樻妧宸?/h3>

鈥?strong>鈥嬫妧宸?锛氭€庝箞閬垮厤鏂囦欢琚场鐑傦紵鈥?/strong>鈥嬶紙鏂囦欢鏁版嵁鎹熷潖锛?/p>

• 瑁呯鐨勬椂鍊欒创闃叉挒鏍囩锛氫娇鐢ㄦ纭殑MIME绫诲瀷

javascript澶嶅埗
// 姣斿涓婁紶word鏂囨。瑕佸啓娓呮
form.append('doc', docFile, { 
  type: 'application/msword' 
});

鈥?strong>鈥嬫妧宸?锛氬揩閫掑崟鍜岀洅瀛愬湴鍧€瑕佸涓婂彿鈥?/strong>鈥?/p>

• 鏂囨湰瀛楁鍚嶉渶瑕佸墠鍚庣瀵规殫鍙蜂技鐨勪繚鎸佺粺涓€锛?/li>

javascript澶嶅埗
// 鍓嶇鍙玭ickname锛屽悗绔篃瑕佹帴nickname
form.append('nickname', '鏄庢槑浼氬啓BUG');

鈥?strong>鈥嬫妧宸?锛氭壒閲忓彂璐х殑绉樿瘈鈥?/strong>鈥嬶紙澶氭枃浠朵笂浼狅級
涓嶆槸璇村彧鑳戒紶鍗曚釜鏂囦欢涔堬紵鏁欎綘涓皬鎶婃垙锛屽湪input鏍囩鍔犱釜multiple灞炴€э細

html杩愯澶嶅埗
<input type="file" multiple id="album">

鐒跺悗寰幆瑁呰揣锛?/p>

javascript澶嶅埗
document.querySelector('#album').files.forEach(file => {
  form.append('photos[]', file); // []琛ㄧず瑕佷紶鏁扮粍
});

---

甯歌缈昏溅鐜板満鎬ユ晳鎵嬪唽

鈥?strong>鈥嬬炕杞?锛?鎴戞槑鏄庝紶浜嗗浘锛屽悗鍙拌娌℃敹鍒?鈥?/strong>鈥?br/> 鍏堝埆鎬ョ潃鎬€鐤戣嚜宸辩殑閿洏鍧忎簡锛屾鏌ヨ繖涓夋锛?/p>

1. 鐪嬬湅蹇€掔灏佸彛锛堣姹傚ご锛夋槸涓嶆槸multipart/form-data
2. 纭蹇€掑憳浼氭媶杩欑绠卞瓙锛堟湇鍔″櫒閰嶇疆瑙ｆ瀽涓棿浠讹級
3. 鏍稿杩愬崟鍙峰拰绠卞瓙涓婄殑鏍囩瀵逛笉瀵瑰緱涓婏紙瀛楁鍚嶅尮閰嶏級

鈥?strong>鈥嬬炕杞?锛?鍥惧お澶у彂涓嶈繃鍘诲崱姝诲暒"鈥?/strong>鈥?br/> 杩欐椂鍊欓渶瑕佽€佸徃鏈虹殑闄愭祦鎶€宸э細

• 鍦ㄥ徃鏈猴紙瀹㈡埛绔級閭ｈ竟鍏堣繃纾呮鏌ユ枃浠跺ぇ灏?/li>

javascript澶嶅埗
if(file.size > 5 * 1024 * 1024) {
  alert('鏂囦欢浣撶Н瓒?M鍟︼紝鍘嬬缉涓€涓嬪啀浼?);
  return;
}

• 鐢ㄥ垎绠辫繍杈撴硶锛堝垎鐗囦笂浼狅級
• 缁欏徃鏈洪厤涓姪鐞嗭紙Web Worker鍚庡彴澶勭悊锛?/li>

鈥?strong>鈥嬬炕杞?锛?缃戠粶鎶介浼犱竴鍗婃柇绾夸簡"鈥?/strong>鈥?br/> 杩欐椂鍊欏氨璇ヤ寒鍑烘潃鍣ㄢ€斺€旂画浼犳湇鍔★細

1. 鐢ㄦ枃浠秇ash鐢熸垚鍞竴韬唤璇?/li>
2. 鍛婅瘔鏈嶅姟鍣細"涓婃浼犲埌鍝簡"
3. 鎺ョ潃涓婃鐨勪綅缃户缁紶

鍐欑粰鏂版墜鐨勫績閲岃瘽

鐜板湪鐨勭綉椤靛氨鍍忚嚜鍔╅鍘咃紝鐢ㄦ埛鎬绘兂涓€鍙ｆ皵涓婁紶鍚勭涓滆タ鈥斺€旂畝鍘嗘枃妗ｃ€佺敓娲荤収銆佽棰戜綔鍝併€傛垜涔嬪墠鍋氱敤鎴疯皟鐮旓紝鍙戠幇70%鐨勫皬浼欎即涓嶇煡閬撹兘娣峰悎涓婁紶锛岄兘鏄偦鍌诲湴鍏堜紶澶村儚鍐嶅～淇℃伅銆傛嫓鎵橈紒杩欓兘2023骞翠簡锛屽挶浠璁╀汉瀹朵綋楠屼笣婊戞劅鍢涳紒

涓嶈繃涔熻鎻愰啋鍚勪綅鍚岃鍏勫紵锛岃櫧鐒禙ormData寰堝ソ鐢紝浣嗘槸鍒湪澶х櫧澶╃粰鏁版嵁搴撶媯濉?K瑙嗛鍟婏紒鎴戜箣鍓嶆湁涓柊鎵嬪湪娴嬭瘯鐜涓婁紶浜?0涓摑鍏夌數褰憋紝鐩存帴鎶婃湇鍔″櫒鎼炲穿浜?..鍚庢潵杩愮淮澶у摜浜插垏鍦拌鍠濅簡涓夊ぉ鍜栧暋鎵嶆秷姘斻€傛墍浠ュ憿锛屸€?strong>鈥嬪仛鍔熻兘鏃惰寰楀姞涓枃浠剁被鍨?澶у皬鐨勬彁閱掆€?/strong>鈥嬶紝灏卞儚濂惰尪搴楄创"灏忓績鐑彛"涓€鏍疯创蹇冩墠瀵癸紒

鏈€鍚庡伔鍋峰憡璇変綘锛岀幇鍦ㄥ緢澶氬叕鍙搁兘鍦ㄧ敤鐜版垚鐨勪笂浼犵粍浠跺簱锛屾柊鎵嬪垰寮€濮嬩笉鐢ㄧ‖鍟冨簳灞傚師鐞嗐€備絾灏卞儚瀛﹀仛鑿滃緱鍏堣閿呯鐡㈢泦锛屼簡瑙ormData杩欑鍩虹宸ュ叿鎬庝箞鐢紝灏嗘潵閬囧埌bug鎵嶅ソ鎺掓煡鍝︼綖