将base64的图片转成文件上传至服务器

最新推荐文章于 2024-12-26 16:06:55 发布

原创最新推荐文章于 2024-12-26 16:06:55 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#文件上传 #base64

前端同时被 3 个专栏收录

23 篇文章

订阅专栏

jQuery

4 篇文章

订阅专栏

文件上传

1 篇文章

订阅专栏

本文介绍了一种将Base64编码的图片转换为图片文件并上传至服务器的方法。首先，通过JavaScript函数将Base64字符串转换为图片文件，然后使用Ajax进行文件上传操作。文章提供了完整的代码实现，包括数据URL到文件对象的转换和AJAX上传过程。

1、首先将base64字符串转成图片,filename为文件名称，用户自定义

function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(',');
    var mime = arr[0].match(/:(.*?);/)[1];
    var bstr = atob(arr[1]);
    var n = bstr.length;
    var u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    //转换成file对象
    return new File([u8arr], filename, {type:mime});
}

2、进行文件上传

function UpBase64Img(dataurl){
    var filename = "";
    var formData = new FormData();
    formData.append('file', dataURLtoFile(dataurl,'tupian.png'));
    $.ajax({
        type: "POST",
        url: AshxUrl + 'api/UpLoadFile/FileSave',
        contentType: false,
        processData: false,
        data: formData,
        async: false,
        success: function(res) {
            // console.log(res);
            if (res.result != 1) {
                webToast("图片上传失败请重试","middle", 2000);
                return;
            }else{
                webToast("图片上传成功","middle", 2000);
                filename = res.newFileName;
            }

        },
        fail: function(res) {
            alert(res.ERROR);
        }
    });
    return filename;
}