图片上传及图片处理-----前端技术栈（基础篇）

1.实现需求

对于图片上传，分为单张上传，和多张上传。以下以多张图片上传。分析图片上传步骤
单图片上传前，一般会做以下处理。

• 判断图片大小，超过200kb，会在前端进行等比压缩
• 压缩完成后，需要将压缩的base64转换为blob
• 将blob作为url放入img中进行预览
• blob上传到服务器
• 
  基于以上需求，我们实现一个demo

2.功能实现

1.图片上传前处理

// 预览及上传图片
function toPreviewer(base64){
    var file = base64toBlob(base64);
    var imgUrl = getImgUrl(file)
    // imgUrl 图片的url(可直接放入img中,逻辑带处理)   
    var formData = new FormData();
    //append函数的第一个参数是后台获取数据的参数名，Java后台使用MutipartFile接收即可
    formData.append("file",file);
    //ajax 提交formData();uploadData(formData)   
}

/**
 * @prams file 图片文件
 */
function handPicture(file){ 
    if (!/\/(?:jpeg|jpg|png)/i.test(file.type)) return;
    var reader = new FileReader();
    reader.onload = function() {
        var result = this.result;
        var img = new Image();

        // 如果图片小于 200kb，不压缩
        if (result.length <= maxsize) {
            toPreviewer(result);
            return;
        }

        img.onload = function() {
            var base64 = compressByCanvas(img, file.type);
            toPreviewer(base64);
            img = null;
        };

        img.src = result;
    };

    reader.readAsDataURL(file);
}
// canvas压缩img
function compressByCanvas(img,type) {
   if(!type) type= "image/jpeg";

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext('2d');

    var width = 1000;
    var height = (img.height/img.width)*1000;

    canvas.width = width;
    canvas.height = height;

    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, width, height);

    // 压缩
    var base64data = canvas.toDataURL("image/jpeg", 0.8);
    canvas = ctx = null;

    return base64data;
}
function base64toBlob(base64){
    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);
    }
    return new Blob([u8arr], { type: mime });
}
/**
 * 得到blob:url
 */
function getImgUrl (file) {
   var url = null;
     if (window.createObjectURL != undefined) {
         url = window.createObjectURL(file)
     } else if (window.URL != undefined) {
         url = window.URL.createObjectURL(file)
     } else if (window.webkitURL != undefined) {
         url = window.webkitURL.createObjectURL(file)
     }
     return url
 }

如上我们基本上就做好了一张图片上传前的全部处理。只需要实现我们具体业务的逻辑即可。
接下来我们模拟上传。

2.图片上传
图片上传分好几种情况，

• form表单提交
• 虚拟form表单提交
• jquery.ajax异步提交formData
• axios.ajax异步提交formData
• ajax原生提交blob文件
• ajax原生提交formData
  下面，我先介绍两种比较主流的吧。
  1).jquery.ajax异步提交formData
  接上一个步骤来，我们完成数据的提交

$.ajax({
    // 你后台的接收地址
    url : path + "/upload/uploadPicture",
    type : "POST",
    data : formData,
    dataType:"json",
    processData : false,         // 告诉jQuery不要去处理发送的数据
    contentType : false,        // 告诉jQuery不要去设置Content-Type请求头
    success:function(data){
        modify(data);
    },
    xhr:function(){            //在jquery函数中直接使用ajax的XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                console.log("正在提交."+percentComplete.toString() + '%');        //在控制台打印上传进度
            }
        }, false);

        return xhr;
    }
});

*2).axios.ajax异步提交formData*
废话也不说了，上代码。

let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
axios.post(path + "/upload/uploadPicture", param, config)
      .then(response => {
        console.log(response.data)
      })     

3).ajax原生提交图片
上代码就行了

var xhr = null; //得到xhr对象
if(XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.open("post", path + "/upload/uploadPicture", true);//设置提交方式，url，异步提交
xhr.onload = function (){
    var data = xhr.responseText;    //得到返回值(String类型需要转换)
}
// xhr.onreadystatechange = function(){
//       if(xhr.readyState == 4 && xhr.status==200){
//           console.log(xhr.responseText);
//        }
//    };
xhr.send(form);

好了，这一节暂时先bb到这里了。下一节会使用5+runtime来实现这一节的内容