vue2+element ui 项目使用Upload 上传组件，实现图片压缩

在template中代码

					<el-form-item 
                            label="图片"
                            :label-width="'120px'"
                            prop="menuName"
                  >
					<el-upload
                                action="#"
                                class="avatar-uploader"
                                :auto-upload="false"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                                :on-change="onChange"
                            >
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>

script中代码

<script>
// 引入做压缩处理的函数
import {
    
    transitionBase64,
    compressImg,
    dataURItoBlob,
    base64ToFile
 } from '@/utils/compressTransitionImg.js'
export default {
   
    data() {
   
        return {
   
            imageUrl: '',
        }
    },
    methods: {
   
        // 图片改变
        async onChange(file, fileList) {
   
            console.log('file, fileList', file, fileList)
            console.log('上传的文件file', file)
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            /* if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            } */

            // 定义需要上传的文件
            let formData = new FormData()
            formData.append('file', file.raw)
            console.log('formData', formData)
            console.log('formData.getAll()', formData.getAll(['file']))
            
            // this.imageUrl = URL.createObjectURL(file.raw)

            let result = await transitionBase64