base64 位编码 转图片后放入 FormData 使用 ajax 提交到 后端

图片 base64 编码 转 blob

    // 图片 base64 url 转 blob 
    function dataURLtoBlob(dataurl) {
        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 Blob([u8arr], { type: mime });
    }

监听 change 事件 并使用 ajax 传到 后端

 

    // 选择 图片
    $('input[type="file"]').change(function(){
        // console.log(this.files);
        if (!this.files[0].type.match('image.*')) {
            return false;
        }
        var reader = new FileReader();
        var _this = this;
        reader.onload = function(){
            $(_this).parent().find('img').prop('src', event.target.result);
            var _blob = dataURLtoBlob(event.target.result);
            
            // 表单 对象
            var formData = new FormData();
            formData.append('card', _blob);
            // console.log(img_blob);
            
            // 提交 数据
            $.ajax({
                type: 'POST',
                url: 'text.php',
                contentType: false, // 必须
                processData: false, // 必须
                data: formData,
                dataType: 'json',
                success: function(data){
                    console.log(data);
                },
                error: function(err){
                    console.log(err);
                }
            });
        }
        reader.readAsDataURL(this.files[0]);
    });

ajax 参数 说明：

1. contentType: false, 参考：https://blog.csdn.net/a651291702/article/details/80602829
   1. MIME(Multipurpose Internet Mail Extension)类型是一种表示文档的性质和格式的标准化方法。在浏览器中使用MIME类型来告诉服务器确定如何处理文档数据和显示文档，而不是通过文件扩展名。
   2. 通过设置Request或者response的实体消息ContentType，能够让数据或者资源按照其MIME类型规定的处理或者显示方式被处理。在浏览器中，最为常见的MIME类型有 text/html text/css  application/json  image/* application/x-www-form-urlencode multipart/form-data 。对于前3种比较容易理解，这里主要解释下后面2种类型。application/x-www-form-urlencode 作用为将以key/value的文本数据对于所有字符都进行URL转码并上传，例如将{name:“lucy”,age:“21”}转化为“name=lucy&age=21"并且它是浏览器的默认的ContentType值。multipart/form-data 作用则能够上传文件和文本数据。对于提交文件而言，一定要设置其ContentType为multipart/form。主要可以在 form 标签中设置 enctype=‘multipart/form’ 或者 在jquery的ajax中设置中contentType:false等。
2. processData: false,
   1. 发送到服务器的数据，将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
   2. 类型：Boolean;默认值:true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
   3. 默认情况下，Ajax 请求使用 GET 方法。如果要使用 POST 方法，可以设定 type 参数值。这个选项也会影响data选项中的内容如何发送到服务器。data选项既可以包含一个查询字符串，比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: ‘value1’, key2: ‘value2’}。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置 processData 选项为 false 来回避。如果我们希望发送一个 XML 对象给服务器时，这种处理可能并不合适。并且在这种情况下，我们也应当改变 contentType 选项的值，用其他合适的 MIME 类型来取代默认的 application/x-www-form-urlencoded。