el-upload 连同参数实现多图片上传组件

<template>
  <div class="upload">
    <el-upload
      :class="{ disUoloadSty: noneBtnImg }"
      multiple
      ref="upload"
      action="laitiaoke"
      list-type="picture-card"
      :file-list="fileList"
      :limit="6"
      :on-change="handleChange"
      :on-preview="handlePictureCardPreview"
      :on-exceed="handleOverstep"
      :on-remove="handleRemove"
      :http-request="uploadFile"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-plus"></i>
      <div slot="tip" class="el-upload__tip">
        <p>1、上传图片只能是 JPG/PNG 格式!</p>
        <p>2、上传图片大小不能超过 1MB,且总数量不超过6张!</p>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    close: Boolean
  },
  watch: {
    close: {
      handler(newValue, oldValue) {
        if(newValue == true){
          this.fileList= []
          this.formDate = new FormData()
          this.$emit("formDate", 'close');
        }
      },
      deep: true
    }
  },
  data() {
    return {
      fileList: [],
      formDate: new FormData(),
      isbandel: false,
      dialogVisible: false,
      dialogImageUrl: "",
      noneBtnImg: false
    };
  },
  methods: {
    uploadFile(file) {
      this.formDate.append("file", file.file);
      this.$emit("formDate", this.formDate);
    },
    //取消上传
    canleUpload() {
      console.log("canleUpload");
      this.classifyWindow = false;
      this.$refs.upload.clearFiles();
    },
    //查看大图
    handlePictureCardPreview(file) {
      console.log("handlePictureCardPreview");
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleChange(file, fileList) {
      this.noneBtnImg = fileList.length >= 6;
    },
    // 超出上传最大数
    handleOverstep(files, fileList) {
      this.$message.error("最多只能上传6张图片");
    },

    // 文件删除操作
    handleRemove(file, fileList) {
      this.fileList = [];
      this.fileList = fileList;
      this.noneBtnImg = fileList.length >= 6;
      this.formDate = new FormData();
      this.fileList.forEach(item => {
        this.formDate.append("file", item.raw);
      });
      this.$emit("formDate", this.formDate);
    },
    //上传图片之前判断图片大小及格式
    beforeAvatarUpload(file) {
      console.log("beforeAvatarUpload");
      const isJPG = ["image/png", "image/jpeg", "image/jpg", "image/gif"].indexOf(file.type) == -1 ? 0 : 1;
      const isLt10M = file.size / 1024 / 1024 < 1;
      const isLt20 = file.name.length < 10;
      if (!isJPG) {
        this.$message.error("上传图片格式必须是.gif,jpeg,jpg,png中的一种");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      if (!isLt20) {
        this.$message.error("上传文件名称长度必须要小于10个文字!");
        return false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.disUoloadSty /deep/ .el-upload--picture-card {
  display: none; /* 上传按钮隐藏 */
}
.el-upload__tip {
  line-height: 20px;
}
</style>