大文件上传的几种优化思路

varimgURL = URL.createObjectURL(file);

ctx.drawImage(imgURL, 0, 0);

// 获取图片的编码，然后将图片当做是一个很长的字符串进行传递

vardata= canvas.toDataURL( "image/jpeg", 0.5);

在服务端需要做的事情也比较简单，首先解码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

)));

}

// 读取二进制文件

functionreadBinary(text){
vardata = newArrayBuffer(text.length);

varui8a = newUint8Array(data, 0);

for( vari = 0; i < text.length; i++){
ui8a[i] = (text.charCodeAt(i) & 0xff);

}

console.log(ui8a)

}

varreader = newFileReader;

reader. = function{
readBinary( this.result) // 读取result或直接上传

}

// 把从input里读取的文件内容，放到fileReader的result字段里

reader.readAsBinaryString(file);

formData异步上传

letfiles = e.target.files // 获取input的file对象

letformData = newFormData;

formData.append( 'file', file);

axios.post(url, formData);

服务端处理方式与直接form表单请求基本相同。

iframe无刷新页面

在低版本的浏览器（如IE）上，xhr是不支持直接上传formdata的，因此只能用form来上传文件，而form提交本身会进行页面跳转，这是因为form表单的target属性导致的，其取值有

_self，默认值，在相同的窗口中打开响应页面

_blank，在新窗口打开

_parent，在父窗口打开

_top，在最顶层的窗口打开

framename，在指定名字的iframe中打开

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)

}

})

}

长按二维码，扫扫关注哦