用騷操作解決Spring Boot上傳大文件的問(wèn)題
然后編寫(xiě)index.php上傳文件接收代碼，使用move_uploaded_file方法即可(php大法好…)
form表單上傳大文件時(shí)，很容易遇見(jiàn)服務(wù)器超時(shí)的問(wèn)題。通過(guò)xhr，前端也可以進(jìn)行異步上傳文件的操作，一般由兩個(gè)思路。
文件編碼上傳
第一個(gè)思路是將文件進(jìn)行編碼，然后在服務(wù)端進(jìn)行解碼，之前寫(xiě)過(guò)一篇在前端實(shí)現(xiàn)圖片壓縮上傳的博客，其主要實(shí)現(xiàn)原理就是將圖片轉(zhuǎn)換成base64進(jìn)行傳遞
varimgURL?=?URL.createObjectURL(file);
ctx.drawImage(imgURL,?0,?0);
//?獲取圖片的編碼，然后將圖片當(dāng)做是一個(gè)很長(zhǎng)的字符串進(jìn)行傳遞
vardata=?canvas.toDataURL(?"image/jpeg",?0.5);
在服務(wù)端需要做的事情也比較簡(jiǎn)單，首先解碼base64，然后保存圖片即可
$imgData?=?$_REQUEST[?'imgData'];
$base64?=?explode(?',',?$imgData)[?1];
$img?=?base64_decode($base64);
$url?=?'./test.jpg';
if(file_put_contents($url,?$img))?{
exit(json_encode(?array(
url?=>?$url
)));
}//?讀取二進(jìn)制文件
functionreadBinary(text){
vardata?=?newArrayBuffer(text.length);
varui8a?=?newUint8Array(data,?0);
for(?vari?=?0;?i?ui8a[i]?=?(text.charCodeAt(i)?&?0xff);
}
console.log(ui8a)
}
varreader?=?newFileReader;
reader.?=?function{
readBinary(?this.result)?//?讀取result或直接上傳
}
//?把從input里讀取的文件內(nèi)容，放到fileReader的result字段里
reader.readAsBinaryString(file);
formData異步上傳letfiles?=?e.target.files?//?獲取input的file對(duì)象
letformData?=?newFormData;
formData.append(?'file',?file);
axios.post(url,?formData);
服務(wù)端處理方式與直接form表單請(qǐng)求基本相同。
iframe無(wú)刷新頁(yè)面
在低版本的瀏覽器（如IE）上，xhr是不支持直接上傳formdata的，因此只能用form來(lái)上傳文件，而form提交本身會(huì)進(jìn)行頁(yè)面跳轉(zhuǎn)，這是因?yàn)閒orm表單的target屬性導(dǎo)致的，其取值有
_self，默認(rèn)值，在相同的窗口中打開(kāi)響應(yīng)頁(yè)面
_blank，在新窗口打開(kāi)
_parent，在父窗口打開(kāi)
_top，在最頂層的窗口打開(kāi)
framename，在指定名字的iframe中打開(kāi)functionupload{
varnow?=?+?newDate
varid?=?'frame'+?now
$(?"body").append(?`"display:none;"?name="${id}"?id="${id}"?/>`);
var$form?=?$(?"#myForm")
$form.attr({
"action":?'/index.php',
"method":?"post",
"enctype":?"multipart/form-data",
"encoding":?"multipart/form-data",
"target":?id
}).submit
$(?"#"+id).on(?"load",?function{
varcontent?=?$(?this).contents.find(?"body").text
try{
vardata?=?JSON.parse(content)
}?catch(e){
console.log(e)
}
})
} 大文件上傳
?評(píng)論
圖片
表情