VUE实现上传附件（各类都支持）并能删除

 通常上传都分为上传图片和文件，那如果要求都能上传，以下的代码一定能帮到你：

<div style="padding:20px">
      <div class="body">
        <p>请打包上传授信资料清单及各模板资料</p>
        <br>
        <div>
          <p style="float:left;color:red;font-size:14px">*</p>
          <p style="float:left;font-size:14px">申请授信资料上传</p>
          <br>
        </div>
        <br>
        <el-upload
          class="upload-demo"
          ref="classZip"
          action="action"
          :data="{ taskId: helloTaskId }"
          :on-preview="handlePreview"
          name="classZip"
          :on-remove="handleRemove"
          :on-error="handleError"
          :on-success="handleSuccess"
          multiple
          :on-exceed="handleExceed"
          :before-upload="beforeAvatarUpload"
          :limit="1"
          :on-change="handleChange"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <div slot="tip" class="el-upload__tip" style="color: red;">
            {{ message }}
          </div>
        </el-upload>
        <!-- <button
          class="helloSubmitBtn"
          @click="submitUpload"
          :class="
            helloTaskId != '' && wordFlag == true
              ? 'subMitError'
              : 'subMitSuccess'
          "
        >
          提交
        </button> -->
      </div>
    </div>

export default {
  data() {
    return {
      sunmitShow: false,
      helloTaskId: "",
      imgFlag: false,
      message: "",
      Wordmessage: "", //输入不能为空提示
      fileNmae: "",
      wordFlag: false
    };
  },
  methods: {
    handleChange() {
      this.wordFlag = true;
    },
    handleExceed(files, fileList) {
      //  console.log(files,fileList,"文件超出个数限制时的钩子");
      this.message = "只允许上传一个文件";
    },
    upload() {},
    beforeAvatarUpload(file) {
      var FileExt = file.name.replace(/.+\./, "");
      if (["zip", "rar", "gz", ".apk"].indexOf(FileExt.toLowerCase()) === -1) {
        this.message = "文件格式有误，请重新上传";
        return false;
      }

      this.message = "上传中,请稍等";
    },
    handleError(err, file, fileList) {
      //  console.log(err, file, fileList,"失败")
      this.message = "上传失败";
    },
    handleSuccess(response, file, fileList) {
      //console.log(response, file, fileList,"成功")

      this.message = "上传成功";
      setTimeout(() => {
        this.$router.push({
          path: "/homePage",
          query: {
            id: 1
          }
        });
      }, 1000);
    },
    helloSunmitBtn() {},
    submitUpload() {
      //  console.log(this.$refs.classZip)
      if (!this.wordFlag) {
        this.message = "请上传文件";
        return;
      }
      if (this.helloTaskId == "") {
        this.Wordmessage = "请填写任务ID";
        return;
      } else {
        this.Wordmessage = "";
        this.$refs.classZip.submit();
      }
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList,"删除");
    },
    handlePreview(file) {
      //  console.log(file,"已上传的文件时的钩子");
    }
  }
};