效果图

代码块

HTML部分

name="scrm-files" 代表发送请求的时候 文件流的参数名

<el-upload
              :action="uploadImgUrl"
              list-type="picture-card"
              :on-success="handleUploadSuccess"
              :before-upload="handleBeforeUpload"
              :limit="limit"
              :on-error="handleUploadError"
              :on-exceed="handleExceed"
              name="scrm-files"
              :on-remove="handleRemove"
              :show-file-list="true"
              :headers="headers"
              :on-preview="handlePictureCardPreview"
              :class="{ hide: this.fileList.length > 0 }"
              ref="upload"
            >
              <i class="el-icon-plus"></i>
</el-upload>

 <!-- 预览弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
    </el-dialog>

js部分

this.$loading() 如果引入了element-ui 就可以使用这个全局的方法 可以调用实现页面加载功能

export default {
	data(){
		return{
			limit: 1,		   // 最大上传数量
			fileSize: 5,	           // 上传图片的最大限制（MB）
			uploadImgUrl: ''           // 上传图片的接口地址
			fileType: ["png", "jpg", "jpeg"], // 上传类型
                        fileList: [],             // 存上传图片的数组
                        dialogVisible: false,
                        dialogImageUrl：'',
			headers:{
				Authorization: getToken(), // 请求头需要带的token
			}
		}
	},
	methods:{
		 // 上传成功回调
    	handleUploadSuccess(res) {
      		this.fileList.push({ name: res.fileName, url: res.data[0] });
      		this.loading.close();
    	},
    	// 上传前loading加载
    	handleBeforeUpload(file) {
      		let isImg = false;
      		if (this.fileType.length) {
        		let fileExtension = "";
        		if (file.name.lastIndexOf(".") > -1) {
          			fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        		}
        		isImg = this.fileType.some((type) => {
          			if (file.type.indexOf(type) > -1) return true;
          			if (fileExtension && fileExtension.indexOf(type) > -1) return true;
          			return false;
        		});
      		} else {
        		isImg = file.type.indexOf("image") > -1;
      		}
      		if (!isImg) {this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
        		return false;
      		}
      		if (this.fileSize) {
        		const isLt = file.size / 1024 / 1024 < this.fileSize;
        		if (!isLt) {
          			this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
          			return false;
        		}
      		}
      		this.loading = this.$loading({
        		lock: true,
        		text: "上传中",
        		background: "rgba(0, 0, 0, 0.7)",
      		});
    	},
    	 // 上传失败
    	handleUploadError() {
      		this.$message({
        		type: "error",
        		message: "上传失败",
      		});
      		this.loading.close();
    	},
    	// 文件个数超出
    	handleExceed() {
      		this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
    	},
    	// 删除图片
    	handleRemove() {
      		this.fileList = [];
    	},
    	// 预览
    	handlePictureCardPreview(file) {
      		this.dialogImageUrl = file.url;
      		this.dialogVisible = true;
    	},
	}
}

CSS 上传到指定数量时 隐藏上传按钮

这个是你定义的limit来控制隐藏和显示的

::v-deep.hide .el-upload--picture-card { display: none; }

这个就是完整的图片上传功能了 可以拆分组件单独封装多次使用 在上传成功的回调那里写上$emit 把fileList传过去就可以了