el-upload批量手动上传，并用form表单校验上传文件-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-upload批量手动上传，并用form表单校验上传文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

手动上传设置:auto-upload="false"文章来源地址https://www.toymoban.com/news/detail-627039.html

 <el-form
          ref="formData"
          class="formWidth"
          :model="formData"
          label-width="120px"
          :rules="rules"
        >
          <el-form-item
            label="数据"
            class="uploadClass"
            required
            prop="fileList"
          >
            <el-upload
              class="upload-demo"
              action="#"
              :on-change="handleChange"
              :on-preview="handlePreview"
              :auto-upload="false"
              accept=".jpg, .jpeg, .png, .jfif"
              :on-remove="handleRemove"
              :file-list="formData.fileList"
              multiple
              :limit="1000"
            >
              <el-button size="small" type="primary">选择文件</el-button>
              <div slot="tip" class="el-upload__tip">jpg/png/jfif</div>
            </el-upload>
          </el-form-item>
        </el-form>

        <vxe-button
          status="primary"
          :loading="confirmLoading"
          :content="confirmLoading ? '识别中' : '确认'"
          @click="confirmInfo()"
          size="small"
        ></vxe-button>

data() {
    return {
      // 上传参数
      addModel: false,
      formData: {
        fileList: [],
      },
      rules: {
        fileList: [
          { required: true, message: "请上传数据", trigger: "change" },
        ],
      },
      errorMsg: null, // 业务编码校验提示语
    }
  },

// 确认上传
    async confirmInfo() {
      // 整体表单校验
      this.$refs.formData.validate(async (valid) => {
        if (!valid) {
          return false;
        }
        this.confirmLoading = true;
        let pathUrl = [],i=0;
        for (let list of this.formData.fileList) {
          let targetRoute = `file/${list?.name}`;
          await putFile(targetRoute, list.raw);
          // 第一次上传oss的时候延迟5ms，用于oss上传函数请求成功并获得返回值，防止循环请求oss token获取函数
          if (i == 0) await this.delay(500);
          pathUrl.push(targetRoute);
          i++;
        }
        //此处写请求函数
        await this.$rquest.aaa()
      });
    },
    // 延迟函数
    async delay(ms) {
      return new Promise((resolve) => {
        setTimeout(resolve, ms);
      });
    },
    // 上传之前校验
    handleChange(file, fileList) {
      let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
      let typeInfo = ["jpg", "jpeg", "png", "jfif"];
      fileName = fileName.toLowerCase();
      if (!typeInfo.includes(fileName)) {
        this.$message({
          type: "warning",
          message: "请上传jpg/png/jfif格式的图片",
        });
        // 过滤掉不符合条件的文件
        this.formData.fileList = this.formData.fileList.filter(
          (list) => list.uid != file.uid
        );
        return false;
      }
      // 存储符合条件的所有fileList数据
      this.formData.fileList = fileList; // 存储上传的文件
    },
    handleRemove(file, fileList) {
      // 执行移除方法的时候重新更新数据
      this.formData.fileList = fileList;
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

到了这里，关于el-upload批量手动上传，并用form表单校验上传文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！