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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_43316300/article/details/88239728

这是常见的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 文件 ⬇️

<div class="row">
	<label class="form-label">缩略图：</label>
	<div id="img">
        <input type="file" id="file">
        <button id="btn" onclick="uploadImg()">上传图片</button>
        <img alt="" id="img1" style="margin:10px 0 0 0; clear:both;"/>
    </div>
</div>

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 对象就可以获取到所有的值了!!!

 var idJustoFiles = document.getElementById("img-idJust").files;
 var idBackoFiles = document.getElementById("img-idBack").files;
 var params = new FormData();
 params.append('idJust', idJustoFiles[0]);
 params.append('idBack', idBackoFiles[0]);
 params.append('nickName', nickName);
 params.append('phone', phone);
 params.append('QQ', QQ);
 params.append('tel', tel);   
 $.ajax({
     type: 'post',
     url: baseUrl + "/cp/add_personal_data/",
     data: params,  //对象
     contentType: false,
     processData: false,
     xhrFields: {
         withCredentials: true   //允许浏览器发送验证的凭证
     },
     success: function (data) {
         console.log(data)
         if (data.code !== 0) {
             alert(data.msg)
         } else {
             alert("添加成功 , 页面将会跳转到首页")
             // window.location.href = "./home.html"
         }
     }
 })

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

压缩图片的方法

function dealImage(re,bili,callback){
  var newImage=new Image();
  var quality=0.7;
  newImage.src=re;
  newImage.setAttribute("crossOrigin",'Anonymous')
  var imgWidth,imgHeight;
  newImage.onload=function(){
    var _canvas=document.createElement("canvas");
    var ctx=_canvas.getContext("2d");
    var _canvas = document.createElement("canvas");
    var w = this.width / bili;
    var h = this.height / bili;
    _canvas.setAttribute("width", w);
    _canvas.setAttribute("height", h);
    _canvas.getContext("2d").drawImage(this, 0, 0, w, h);
    ctx.clearRect(0,0,_canvas.width,_canvas.height);
    ctx.drawImage(this,0,0,_canvas.width,_canvas.height);
    var base64=_canvas.toDataURL("image/jpeg",quality);
    callback(base64);//必须通过毁掉函数返回，否则无法及时拿到改值
  }
}
//使用时  第二个参数压缩了四分之一
dealImage(data,4,next);

function next(base64){
	//这里写一些业务逻辑，同时把base64赋值给后台接口
	console.log(base64)
}