图片base64转file对象实现file文件上传

原来的项目都是直接通过input的file控件选择图片上传的，最近一项功能是需要通过canvas处理图片，然后上传。处理后的图片是base64格式，以前是新写一个兼容base64的上传接口处理。

于是想这个项目在前端js就将base64转换成file对象，统一file接收处理。

废话不多说，先上base64转file对象代码

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});
}

图片上传我这里是通过ajax上传，代码如下

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);
    }
});

搞定收工

未经允许不得转载：小罗同学 » 图片base64转file对象实现file文件上传