base64图片转换为file，blob上传及兼容性

// base64 转 files 这是原来的写法

dataURLtoFile(dataURI, fileName) {
				var arr = dataURI.split(',');
				var byteString = atob(arr[1]);
				var mime = arr[0].match(/:(.*?);/)[1];
				var ab =new ArrayBuffer(byteString.length);
				var ia = new Uint8Array(ab);
				for (var i = 0; i < byteString.length; i++) {
					ia[i] = byteString.charCodeAt(i);
				}
				return new File([ia], fileName, {
					type: mime,
					lastModified: Date.now()
				})
			}
			
let formData = new FormData();
let resFile = this.dataURLtoFile(resbase64,'filename_' + files[i].name);
formData.append('file', resFile);

这种方法的缺陷是 new File有兼容性

所以如果系统会兼容ie低版本这里需要改为blob使用

base64 转 Blob

dataURLtoBlob(toDataURL) {
				var arr = toDataURL.split(","),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					//new ArrayBuffer(bstr.length) 这里有争议，加上后后面blob转化为formData 的时候不是乱码形式的流，可以看到类似于就是formData的格式，但是提交后后台给的url图片显示不出来。不使用呢看请求参数的时候就是一堆乱码流，但是后台接口能够通过它正常放回图片路径。之前由于不懂这里直接用网上的代码，哎  后面研究一下，这个就搞了差不多一天。所以建议new ArrayBuffer(bstr.length)  这个可以用于临时调试看参数。实际使用还是使用bstr.length这个吧
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
			},

//转成file

blobToFile(Blob, fileName) {
				Blob.lastModifiedDate = new Date();
				Blob.name = fileName;
				return Blob;
			}



let formData = new FormData();
let bold = this.dataURLtoBlob(resbase64);

//this看情况，我是用的vue写在methods里的，正常当然不用this
let resFile = this.blobToFile(bold, ‘filename_’ + files[i].name);
formData.append(‘file’, resFile,fileName);
这里这句话很有必要 特别是fileName这个参数 ，由于base64的图片 是个没有文件名的
filename 可选
传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 “blob”。 File 对象的默认文件名是该文件的名称。
注意： 如果你指定一个 Blob 作为数据添加到 FormData 对象中， 文件名会被放在 “Content-Disposition” 头部（常常会根据浏览器变化而变化）传给服务器。

Content-Disposition 这个区域的特殊性 当你在formData里面设置了filename的时候不能覆盖原有这个区域的，所以设置了个寂寞 ，当后台验证的时候 验证的是Content-Disposition 这里面的filename 属性然后就是blob 然后还要获取这个filename里面的后缀名，但是这里没有后缀名直接报错。所以这里要借助append的第三个参数设置一个有后缀名的文件名。

参考地址：https://blog.csdn.net/q140948940/article/details/108848552
https://developer.mozilla.org/zh-CN/docs/Web/API/File/File
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/append