vant ui 上传前压缩图片（200K左右）

1、组件

<template>
    <div class="component-upload-image">
        <van-uploader
            v-model="fileList"
            style="margin-right: 10px"
            accept="image/gif, image/jpg, image/jpeg, image/png"
            :max-count="5"
            upload-icon="plus"
            :before-read="beforeRead"
            :before-delete="beforeDelete"
            :after-read="afterRead"
            capture="camera"
        />
    </div>
</template>
​
<script>
import { getToken } from "@/utils/auth";
import { Toast } from "vant";
import axios from "axios";
import { getUploadFile } from "@/api/report";
​
export default {
    name: "UploadFileh5",
    props: {
        value: [String, Object, Array],
        // 图片数量限制
        limit: {
            type: Number,
            default: 1
        },
        // 大小限制(MB)
        fileSize: {
            type: Number,
            default: 50
        },
        // 文件类型, 例如['png', 'jpg', 'jpeg']
        fileType: {
            type: Array,
            default: () => ["png", "jpg", "jpeg", "gif"]
        },
        // 是否显示提示
        isShowTip: {
            type: Boolean,
            default: true
        },
        needArrList: {
            type: Boolean,
            default: false
        },
        busiType: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            number: 0,
            uploadList: [],
            dialogImageUrl: "",
            dialogVisible: false,
            hideUpload: false,
            headers: {
                token: localStorage.getItem("token")
            },
            fileList: [],
            fileObj1: undefined
        };
    },
    computed: {
        // 是否显示提示
        showTip() {
            return this.isShowTip && (this.fileType || this.fileSize);
        }
    },
    watch: {
        value: {
            handler(val) {
                if (val) {
                    this.fileList = val;
                } else {
                    this.fileList = [];
                    return [];
                }
            },
            deep: true,
            immediate: true
        }
    },
    created() {},
    methods: {
        // 判断文件类型
        beforeRead(file) {
            const _this = this;
            if (
                file.type != "image/png" &&
                file.type != "image/jpg" &&
                file.type != "image/jpeg"
            ) {
                Toast("请上传jpg、jpeg或png格式图片");
                return false;
            }
​
            return true;
        },
        dataURLtoFile(dataurl, filename) {
            // 将base64转换为file文件
            let arr = dataurl.split(",");
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {
                type: mime
            });
        },
        // 上传图片
        afterRead(file, detail) {
            let result = file;
​
            if (file.file.size > 200 * 1024) {
                // console.log("压缩执行");
                let canvas = document.createElement("canvas"); // 创建Canvas对象(画布)
                let context = canvas.getContext("2d");
                let img = new Image();
                img.src = file.content; // 指定图片的DataURL(图片的base64编码数据)
                img.onload = () => {
                    canvas.width = img.width;
                    canvas.height = img.height;
                    context.drawImage(img, 0, 0, img.width, img.height);
                    file.content = canvas.toDataURL(file.file.type, 0.92); // 0.92为默认压缩质量
                    file.file = this.dataURLtoFile(
                        file.content,
                        file.file.name
                    );
                    this.fileImgid(file, detail);
                };
            } else {
                // 符合大小的，直接上传
                this.fileImgid(file, detail);
            }
        },
        fileImgid(result, detail) {
            const data = {
                businessId: localStorage.getItem("terminalId"),
                attachName: result.file.name,
                baseString: result.content,
                businesstype: "terminalQuestion",
                businessTable: "tb_terminal_question"
            };
​
            const loading = Toast.loading({
                forbidClick: true,
                text: "上传中，请稍候..."
            });
​
            getUploadFile(data)
                .then(res => {
                    if (res) {
                        // 请求成功后返回图片链接
                        // this.fileList.push(res.attachPath);
                        // console.log("fileList----", this.fileList);
                        this.fileList[detail.index].picId = res;
                    } else {
                        Toast({
                            duration: 5000, // 持续展示 toast
                            message: "上传失败"
                        });
                        this.fileList.splice(detail.index, 1);
                    }
                })
                .finally(() => {
                    loading.close();
                });
        },
        // 删除
        beforeDelete(result, detail) {
            if (result.picId) {
                this.$emit("deleteTerminalImg", result.picId);
            }
            this.fileList.splice(detail.index, 1);
        }
    }
};
</script>
<style scoped lang="scss">
// .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card {
    display: none;
}
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
    transition: all 0s;
}
​
::v-deep .el-list-enter,
.el-list-leave-active {
    opacity: 0;
    transform: translateY(0);
}
</style>

​
​

2、使用

<UploadFileh5 v-model="uploader" :busi-type="'terminalQue'" @deleteTerminalImg="deleteImg" />