h5图片上传偶现不成功

问题:

使用vue+vant写的移动端图片上传;h5图片上传偶现出现请求状态码是0

h5图片上传偶现不成功_第1张图片h5图片上传偶现不成功_第2张图片

 排查:

1.发现在移动端拍照上传没问题,选照片上传就会报Error,请求返回码为0,服务端无日志。

2.拍照上传和选择照片上截取的前120个字符传参数格式一样的情况下,选择照片上传始终报错。

3.输出图片信息,确认图片获取和拍照获取的的数据是否有问题。发现获取没问题。即问题出现在上传时

h5图片上传偶现不成功_第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));
}

 

你可能感兴趣的:(移动端)