element上传文件案例

 <el-form-item label="图片选择" class="top-20">
                <el-upload style=""
                           class="avatar-uploader"
                           :action="_global.UPLOAD_SOURCE_URL"
                           :show-file-list="false"
                           :data="{source:'img_file'}"
                           :on-success="(res,file)=>uploadImg(res)"
                           :before-upload="beforeUpload"
                >
                    <img style="" v-if="form.bg_img_show" :src="form.bg_img_show" class="avatar">
                    <i style="" v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span style="color: #8e8e8e;">注意：图片宽度最大750px，高度不定，限一张</span>
</el-form-item>

<script>
   
    export default {
        name: "Index",
        data() {
            return {
                imgMaxWidth: false,
              
                form: {
                    bg_img: '',
                    bg_img_show: '',
                },
               
            }
        },
        mounted() {
         
        },
        methods: {
            uploadImg(res) {
                if (!this.imgMaxWidth) {
                    this.form.bg_img_show = res.data.show_url;
                    this.form.bg_img = res.data.save_url;
                }
            },
            beforeUpload(file) {

                let _this = this;
                const isImg = /(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.type);
                if (!isImg) {
                    this.$message.error(
                        "上传文件的格式不正确，只能为GIF|JPG|PNG|JPEG，请重新上传！"
                    );
                    return false
                }

                let img = new Image();
                let _URL = window.URL || window.webkitURL;
                img.src = _URL.createObjectURL(file);
                img.onload = function () {
                    if (img.width > 750) {
                        _this.$message.error('图片尺寸宽度限制为750px，请重新选择。当前图片宽度为：' + img.width + 'px');
                        _this.imgMaxWidth = true;
                    } else {
                        _this.imgMaxWidth = false;
                    }
                }
                return true;
            },
        }
    }
</script>