图片base64转file对象实现file文件上传
原来的项目都是直接通过input的file控件选择图片上传的,最近一项功能是需要通过canvas处理图片,然后上传。处理后的图片是base64格式,以前是新写一个兼容base64的上传接口处理。
于是想这个项目在前端js就将base64转换成file对象,统一file接收处理。
废话不多说,先上base64转file对象代码
图片上传我这里是通过ajax上传,代码如下
function dataURLtoFile(dataurl, filename) {
//将base64转换为文件
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});
}
搞定收工var baseData = '';//base64的图片数据
var formData = new FormData();
formData.append("file", dataURLtoFile(baseData,"123.png"));
$.ajax({
url: '/api/common/upload.html' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
console.log(returndata);
},
error: function (returndata) {
alert(returndata);
}
});