Element-ui upload 的this.$refs.upload.submit()；多文件上传为什么只提交一次

最新推荐文章于 2024-11-05 17:25:11 发布

原创最新推荐文章于 2024-11-05 17:25:11 发布 · 736 阅读

CC 4.0 BY-SA版权

文章标签：

我用element-ui的自动上传模版创建的，有两个vue文件使用了这个上传模版，两个vue文件里基本上是一模一样的内容，但是我其中有一个vue里的this.$refs.upload.submit()只执行一次提交，我选取多个文件他只能上传第一个文件，但是另外一个vue里却能正常多个文件上传。

style="width: 195px;"       class="upload-demo1" ref="upload" :file-list="fileList"
    :on-preview="handlePreview" action :http-request="httpRequest" :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" :loading="isSending_register"
      @click="register('form')">上传到服务器</el-button>
    <div slot="tip" class="el-upload__tip1">选取文件后点击上传服务器上传文件(文件名不可含有空格和特殊符号)</div>
  </el-upload>
</el-form-item>

register(formName) {
  this.$refs[formName].validate(jojo => {
    if (jojo) {
      console.log("有效")
      console.log("文件列表:", this.$refs.upload.submit);
      this.$refs.upload.submit();
    } else {
      console.log("error submit!!");
      return false;
    }
  });
},
httpRequest(param) {
  this.isSending_register = true
  let fileObj = param.file; // 相当于input里取得的files
  let data = new FormData(); // FormData 对象
  data.append("file", fileObj); // 文件对象
  data.append("action", this.form.title);
  data.append("name", this.form.name);
  this.$axios.post('/vue/purchase_kanban/purchase_kanban_upload', data, {
    headers: { 'Content-Type': 'multipart/form-data' }
  }).then(res => {
    if (res.code == 200) {
      console.log("结果：", res);
      alert('上传成功')
    } else {
      alert('上传失败')
    }
    this.isSending_register = false
    this.purchase_kanban_filedata(this.form.title, this.form.name)
  }).console(error => {
    console.log("错误：", error);
    alert('发生错误:==' + error)
  });
},

测了一天了都没发现有什么不同，但就是行不通多个文件上传，到底是为什么？求解答

这是行不通的：