Vue用vant上传图片，前端上传之前压缩处理

1. 提交时在上传服务器
2. 同步上传服务器
3. 上传之前压缩图片处理

一、提交时在上传服务器

<div class="uploader">
     <van-uploader  v-model="fileList"  accept="image/*" multiple  :max-count="countMax" />
 </div>
 <div @click="submit">提交</div>

<script>
    window.alert = function (name) {
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
    }
    new Vue({
        el: "#Vue",
        data: {
            countMax: 9,
            fileList: [],
            fileArr: []
        },
        created() {
            document.documentElement.style.fontSize = 16 * document.documentElement.clientWidth / 375 + 'px'
        },
        methods: {
            // 请求公共方法
            ajaximg(type, url, params, cb) {
                $.ajax({
                    type: type,
                    url: url,
                    data: params,
                    dataType: "json",
                    async: true,
                    contentType: false,
                    processData: false,
                    success: (response) => {
                        cb(response)
                    }
                });
            },
    //提交
            submit() {
                if (this.fileList.length < 2) {
                    vant.Toast("图片不能小于2张");
                    return false;
                }
                vant.Toast.loading({
                    message: "加载中...",
                    forbidClick: true,
                    duration: 0,
                });
                this.fileArr = [];
                this.getPreview(this.fileList, 0);
            },
            // 上传图片
            getPreview(file, i) {
                let fileUrl = file[i].file;
                let formData = new FormData();
                formData.append("file", fileUrl);
                formData.append("key", "Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO");
                this.ajaximg('post','域名', formData, (res) => {
                    if (res.status == 200) {
                        this.fileArr.push(res.info.url);
                         if (i + 1 == this.fileList.length) {
                            this.setAdd();
                        }
                        if (++i < this.fileList.length) {
                            this.getPreview(file, i);
                        }
                    } else {
                        vant.Dialog.alert({
                            title: "温馨提示",
                            message: "图片上传失败，请重新上传",
                        }).then(() => { });
                    }
                })
            },
            setAdd() {
                console.log(this.fileArr)

                vant.Toast("上传成功");
            }
        }
    })
</script>

二、同步上传服务器

<van-uploader v-model="fileList" :after-read="afterRead" accept="image/*"
                        multiple :max-count="countMax" @delete='delImg' />
<van-button round block type="info" color="#FF7F50" @click="onSubmit">提交</van-button>

data() {
      return {
          fileList: [], //默认进来有的图片
          fileArr: [], //传给后台的图片
          countMax: 3,//最多上传3张
      };
  },

methods:{
	// 上传图片
	afterRead(file) {
	    if (!Array.isArray(file)) {
	        file = [file]
	    }
	    for (let i = 0; i < file.length; i++) {
	        let fileUrl = file[i].file;
	        file[i].status = 'uploading'
	        file[i].message = '上传中...'
	        let formData = new FormData();
	        formData.append("file", fileUrl);
	        formData.append("key", "Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO");
	        axios({
	            method: 'post',
	            url: process.env.VUE_APP_SUCAI_API,
	            data: formData,
	        }).then((res) => {
	            if (res.data.status == 200) {
	                file[i].id = res.data.info.id
	                file[i].status = 'done'
	                file[i].message = '上传成功'
	                this.fileArr.push({
	                    url: res.data.info.url,
	                    id: res.data.info.id
	                });
	            } else {
	                file[i].status = 'failed'
	                file[i].message = '上传失败'
	                this.$toast.fail("有图片上传失败，请重新上传");
	            }
	        });
	    }
	},
	//删除图片
	delImg(e) {
	    let index = this.fileArr.map((item) => item.id).indexOf(e.id)
	    if (index != -1) {
	        this.fileArr.splice(index, 1)
	    }
	},
	// 提交
    onSubmit() {
         console.log('submit', this.fileArr);//提交给后台的数组
     },
}

三.上传之前压缩图片处理

先在utils新建一个imgPreview.js文件

// 图片压缩
export const imgPreview = (file, callback) => {
    //将base64转换为文件
    function dataURLtoFile(dataurl, file) {
        var arr = dataurl.split(","),
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], file.name, {
            type: file.type
        });
    }
    // 压缩图片
    function compress(img) {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        //瓦片canvas
        let tCanvas = document.createElement("canvas");
        let tctx = tCanvas.getContext("2d");
        // let initSize = img.src.length;
        let width = img.width;
        let height = img.height;
        //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
        let ratio;
        if ((ratio = (width * height) / 4000000) > 1) {
            // console.log("大于400万像素");
            ratio = Math.sqrt(ratio);
            width /= ratio;
            height /= ratio;
        } else {
            ratio = 1;
        }
        canvas.width = width;
        canvas.height = height;
        //    铺底色
        ctx.fillStyle = "#fff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        //如果图片像素大于100万则使用瓦片绘制
        let count;
        if ((count = (width * height) / 1000000) > 1) {
            // console.log("超过100W像素");
            count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
            //      计算每块瓦片的宽和高
            let nw = ~~(width / count);
            let nh = ~~(height / count);
            tCanvas.width = nw;
            tCanvas.height = nh;
            for (let i = 0; i < count; i++) {
                for (let j = 0; j < count; j++) {
                    tctx.drawImage(
                        img,
                        i * nw * ratio,
                        j * nh * ratio,
                        nw * ratio,
                        nh * ratio,
                        0,
                        0,
                        nw,
                        nh
                    );
                    ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                }
            }
        } else {
            ctx.drawImage(img, 0, 0, width, height);
        }
        //进行最小压缩
        let ndata = canvas.toDataURL("image/jpeg", 0.3);
        tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
        return ndata;
    }
    // 看支持不支持FileReader
    if (!file || !window.FileReader) {
        return;
    }
    if (/^image/.test(file.type)) {
        // 创建一个reader
        let reader = new FileReader();
        // 将图片转成 base64 格式
        reader.readAsDataURL(file);
        // 读取成功后的回调
        reader.onloadend = function () {
            let result = this.result;
            let img = new Image();
            img.src = result;
            //判断图片是否大于500K,是就直接上传，反之压缩图片
            if (this.result.length <= 100 * 1024) {
                // 上传图片
                let imageFile = dataURLtoFile(this.result, file);
                callback(imageFile);
            } else {
                img.onload = function () {
                    let data = compress(img);
                    // 上传图片
                    let imageFile = dataURLtoFile(data, file);
                    callback(imageFile);
                };
            }
        };
    }
};

开始页面使用

 <van-uploader v-model="fileList" :after-read="afterRead" accept="image/*" multiple
                        :max-count="countMax" @delete='delImg' />

 import axios from "axios";
 import {
     imgPreview
 } from "../../utils/imgPreview.js";
 data() {
   return {
       fileList: [], //默认进来有的图片
       fileArr: [], //传给后台的图片
       countMax: 9,
   };
},
methods(){
 // 上传图片
 afterRead(file) {
     if (!Array.isArray(file)) {
         // 判断是否只有一张，则转为数组
         file = [file]
     }
     for (let i = 0; i < file.length; i++) {
         console.log('压缩之前图片大小', file[i].file.size)
         imgPreview(file[i].file, async (files) => {
             let fileUrl = files;
             file[i].status = 'uploading'
             file[i].message = '上传中...'
             let formData = new FormData();
             formData.append("file", fileUrl);
             formData.append("key", "Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO");
             console.log('压缩之后图片大小', fileUrl.size)
             axios({
                 method: 'post',
                 url: process.env.VUE_APP_SUCAI_API,
                 data: formData,
             }).then((res) => {
                 if (res.data.status == 200) {
                     file[i].id = res.data.info.id
                     file[i].status = 'done'
                     file[i].message = '上传成功'
                     this.fileArr.push({
                         url: res.data.info.url,
                         id: res.data.info.id
                     });
                 } else {
                     file[i].status = 'failed'
                     file[i].message = '上传失败'
                     this.$toast.fail("有图片上传失败，请重新上传");
                 }
             });
         })
     }
 },
 //删除图片
 delImg(e) {
     let index = this.fileArr.map((item) => item.id).indexOf(e.id)
     if (index != -1) {
         this.fileArr.splice(index, 1)
     }
 },
}