JS,base64编码的图片上传

公司的项目要拍照上传图片,但用了第三方平台,拍照接口返回的是照片的base64编码,如何把base64编码的图片上传到服务器呢?思路上来说:首先,要将base64编码转换成file,再将file塞到from中,提交到后台即可。直接上代码

/**
* imageURI为图片的base64编码,不包含头部部分:data:img/jpg;base64,
**/
var fileName=(new Date()).getTime()+".jpeg"; //随机文件名
var imgfile=convertBase64UrlToImgFile(imageURI,fileName,'image/jpeg'); //转换成file
var formData = new FormData();
formData.append('file', imgfile); //放到表单中,此处的file要和后台取文件时候的属性名称保持一致
$.ajax({
    url:上传文件的后台处理url,
    type:"POST",
    cache:false,
    data:formData,
    processData:false, //不对参数进行转换序列号
    contentType:false, //fromData上传文件时将其设置为false
    success:function(data){
        //成功执行的代码逻辑
    },
    error:function(data){
        //失败执行的代码逻辑
    }
});

其中convertBase64UrlToImgFile函数代码如下:

/**
* 有些浏览器(如edge)不支持new File,所以为了兼容,base64要先转换成blob再设置type,name,lastModifiedDate
* 属性间接转换成文件,而不推荐直接new File()的方式
**/
function convertBase64UrlToImgFile(urlData,fileName,fileType) {
    var bytes = window.atob(urlData); //转换为byte
    //处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Int8Array(ab);
    var i;
    for (i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    //转换成文件,添加文件的type,name,lastModifiedDate属性
    var blob=new Blob([ab], {type:fileType});
    blob.lastModifiedDate = new Date();
    blob.name = fileName;
    return blob;
}

但在调用时,后台始终获取不到设置的filename,一直是blob。查资料发现,需要在formdata.append时加上文件名,如下:

formData.append('file', imgfile,fileName);

如此,问题解决。

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值