关于图片上传的爬坑之路以及解决方法

た入场券 2022-03-12 19:05 172阅读 0赞

### 这是常见的ajax ⬇️ 前后端交互 ###

var datalist = { 
           name: name,              //名称
           app_type:app_type,       //app名
           size_list: size,         //尺寸
           price: price,            //价格
           click_rate: click_rate,  //点击率
           pkg_name: pkg_name,      //包名
           download_links: download_links,   //下载链接
           edition: edition,       //版本
           download: download,     //是否下载
           image: reader.result   //图片base64 , base64可以这样直接放在对象中发送
       }
       $.ajax({ 
           type:"post",
           url:baseUrl + "/cp/", 
           data:datalist,
           xhrFields: { 
              withCredentials: true //支持附带详细信息
           },
           success:function(res) { 
            var str = ""
            console.log(res);
            if (res.code !== 0) { 
                alert(res.msg)
            } else { 
                //成功
            }
        }    
    });

### 这个是可以上传base64字符串的 , 相对简单不用任何解析 ###

#### 弊端就是不利于数据库的存储 因为base64 长度过长 ####

> html 文件 ⬇️

> js 文件 ⬇️

$("#file").change(function(){ 
    	var reader = new FileReader();
        var AllowImgFileSize = 2000000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
        var file = $("#file")[0].files[0];
        var imgUrlBase64;
        if (file) { 
            //将文件以Data URL形式读入页面 
            imgUrlBase64 = reader.readAsDataURL(file);
            console.log(imgUrlBase64);
            reader.onload = function (e) { 
            //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;
            //截取base64码部分（可选可不选，需要与后台沟通）
                  if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) { 
                      alert( '上传失败，请上传不大于2M的图片！');
                      return;
                  }else{ 
                      //执行上传操作
                      console.log(reader.result);  //这个就是图片转的base64
                      $("#img").attr("src",reader.result)   //他可以直接显示在img的src中
                      var file = dataURLtoBlob(reader.result);   //Blob对象存放二进制数据,这一步可以不写了
                      console.log(file)   //返回的十一个 blob对象
                      //当然, 如果后端可以解析Blob对象形式, 也是可以用到的
                  }
            }
        } 
    })  
    // 这个是网上找的封装的将base64 转成 二进制流 ⬇️
    // 结果是一个对象 
    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
        });
    }

###### 解释一下Blob对象的用途和理解 ######

var data='<b style="font-size:32px;color:red;">次碳酸钴</b>';   
    var blob=new Blob([data],{ "type":"text/html"});   
    onload=function(){    
    	var iframe=document.createElement("iframe");   
    	iframe.src=URL.createObjectURL(blob);   
    	document.body.appendChild(iframe);   
    };  
    //HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型，这相当于对文件的储存，其它很多二进制对象也是从这个对象继承的。
    //不仅是上面例子中的text/html，任何浏览器支持的类型都可以这么用。
    //而且这个Blob-URL的生存周期是从创建到文档释放，不会造成资源的浪费。 　　
    //Blob是一个HTML5中很基本的二进制数据对象，很多方法的操作参数都支持使用Blob。
    //总之，几乎所有参数类型是二进制数据的方法都支持使用Blob作为参数就对了。
    //所以把数据做成Blob可以让之后的一些列操作变得更方便。

# 爬坑 #

###### formdata对象不能被再次封装 , 其他文章都不曾提示 ######

### 有其他数据都可以用append方法扔进formdata对象中 , 然后传给后端 !!! ###

### 之后后端在解析 formdata 对象就可以获取到所有的值了!!! ###

> 这就是上传图片的几种方式, 大家随机应变  
> 对了, 还有一种用form表单默认提交的方式可以上传图片, 不同的是这种方式不用ajax  
> 有兴趣的可以去了解一下

### 压缩图片的方法 ###