问题:
使用vue+vant写的移动端图片上传;h5图片上传偶现出现请求状态码是0;
排查:
1.发现在移动端拍照上传没问题,选照片上传就会报Error,请求返回码为0,服务端无日志。
2.拍照上传和选择照片上截取的前120个字符传参数格式一样的情况下,选择照片上传始终报错。
3.输出图片信息,确认图片获取和拍照获取的的数据是否有问题。发现获取没问题。即问题出现在上传时
4.发现参数里的数据是base64位。把它转换成file格式再试一下,发现可以啦
代码如下:
function dataURLtoFile(dataurl, filename) {
// base64转为file
// dataurl为file的content。data开头那个
// filename为文件名
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
afterRead(file) {
var fileContent = file.content;
var Name = file.file.name;
if (Name.indexOf("\\") != -1) {
Name = Name.substring(Name.lastIndexOf("\\") + 1);
}
var fileInfo =this.dataURLtoFile(fileContent, Name);
var formData = new FormData();
formData.append('Filedata', fileInfo);
formData.append('Filename', encodeURIComponent(Name));
}