el-upload批量手动上传,并用form表单校验上传文件

手动上传设置:auto-upload="false"

 <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);
    },

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值