vue之element-ui文件上传（二）

一、点击上传，使用默认的action上传，添加校验，上传成功后，去除校验：

<el-form-item label="文件md5" prop="fileMd5">
          <el-upload
            v-if="!form.fileMd5"
            v-model="form.fileMd5"
            class="upload-demo"
            :action="uploadUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-remove="beforeRemove"
            accept=".apk"
            :limit="1"
            :headers="headers"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary" icon="el-icon-upload"
              >点击上传</el-button
            >
            <div slot="tip" class="el-upload__tip">只能上传apk文件</div>
          </el-upload>
          <span v-if="form.fileMd5">{{ form.fileMd5 }}</span>
  </el-form-item>

js：

data() {
    return {
      
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        taskName: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        fileMd5: [
          { required: true, message: "请上传APK文件", trigger: "blur" },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个分析类型",
            trigger: "change",
          },
        ],
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadUrl:
        process.env.VUE_APP_BASE_API + `${config.service}/main/apkImport`,
      fileList: [],
      fileData: null,
    };
  },

 methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.form.fileMd5 = "";
      this.validateField("fileMd5");
    },
    handlePreview(file) {
      console.log(file);
    },
    // 文件个数超出
    handleExceed(files, fileList) {
      this.$message.warning(`上传文件数量不能超过1个!`);
    },
    beforeRemove(file, fileList) {
      this.form.fileMd5 = "";
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      console.log("上传成功信息", response, file, fileList);
      // const { fileName = "", url = "" } = response.data;
      // this.fileList.push({ name: file.name, url });
      this.$message.success("上传成功！");
      this.handleInputClear("fileMd5");
      this.fileData = JSON.parse(response.data);
      this.form.fileMd5 = JSON.parse(response.data).fileMd5;
    },
    handleInputClear(val) {
      this.$refs.form.clearValidate(val);
    },
    validateField(val) {
      this.$refs.form.validateField(val);
    },
    
  },

二、拖拽上传，和表单一起通过formData提交，添加校验，上传成功后，去除校验：

<el-form-item label="文件上传" prop="file">
          <el-upload
            class="upload-demo"
            v-model="form.file"
            drag
            action="#"
            accept=".xls,.xlsx"
            :auto-upload="false"
            :limit="1"
            :before-remove="beforeRemove"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
            :on-change="handleChange"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">只能上传.xlsx文件</div> -->
          </el-upload>
 </el-form-item>

js：

 data() {
    return {
      
      // 表单参数
      form: {},
      rules: {
        taskName: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
        ],
        categoryId: [
          { required: true, message: "请选择分类", trigger: "change" },
        ],
        monitoringDeadline: [
          {
            required: true,
            message: "请选择日期时间",
            trigger: "change",
          },
        ],
        file: [{ required: true, message: "请上传Excel文件", trigger: "blur" }],
      },
     
      
    };
  },

methods: {
    
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      this.form.file = "";
      this.$refs.form.validateField("file");
    },
    // 文件个数超出
    handleExceed(file, fileList) {
      this.$message.warning(`上传文件数量不能超过1个!`);
    },
    handleSuccess(response, file, fileList) {
      console.log("上传成功信息", response, file, fileList);
      this.$message.success("上传成功！");
      this.$refs.form.clearValidate("file");
    },
    handleChange(file) {
      // console.log(file, 3333);
      this.form.file = file.raw;
      this.$message.success("上传成功！");
      this.$refs.form.clearValidate("file");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let obj = this.form;
          let formData = new FormData();
          for (const key in obj) {
            formData.append([key], obj[key]);
          }

          addMain(formData).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    
  },