vue element ui 一个上传附件或者是多个附件上传(Excel或图片)

BiKaBi又回来了，今天抽空整理一下上传附件的一些坑，希望小伙伴不要能够避开

新增时，上传附件（单个）

上传附件HTML

这里就提一点name是后台需要接收的字段，跟重要，还有一些属性的用法可以去看官方的文档，那属性就不多介绍，element ui 文档

<el-form-item label="营业执照附件：" prop="filePathList1" style="width:100%;">
          <el-upload
            class="upload-demo"
            v-model="filePathList"
            :headers="headerMsg"
            name="files"
            :action="actiontion"
            :on-success="success"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="9"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传9个文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

上传附件JS

// 上传带token
      headerMsg:{Authorization: this.$token},
      //这个是你需要带的token,
      actiontion: this.$baseURL+'/common/upload',
     //这个是你要带的一个地址， 你可以先把后台服务的地址直接写死的，后面再去 axios里面去公共出来
//上传成功后
success(response, file, fileList){
      response.data[0].annexType = 1
      this.filePathList1.push( response.data[0])
      // console.log(this.filePathList);
    },
   // 真正的去删除你已上传的,这里根据你定义的字段去删除（需要去调试一下）
handleRemove(file) {
      console.log(file);
      const { tmp_path } = file.response; //* 2. 从 pics 数组中，找到这个图片对应的索引值
      const i = this.dispatchingsubmit.filePathList.findIndex(
        (item) => item.pic == tmp_path
      ); //* 3. 调用数组的splice方法，把图片信息对象，从pics数组中移除
      this.dispatchingsubmit.filePathList.splice(i, 1);
    },
    handlePreview(file) {
      // console.log(file.name);
    },
    //一次最多上传9个文件，根据你的需求去修改
    handleExceed(files) {
      this.$message.warning(
        `当前限制选择 9 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
   // 删除已上传的提示框
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

修改时，上传附件（单个）

修改的时候不同的点就是你上传的文件需要做显示的作用，需要定义:file-list="fileList1"来接受去赋值

<el-form-item label="营业执照附件：" prop="filePathList1" style="width:100%;">
          <el-upload
            class="upload-demo"
            v-model="filePathList1"
            :headers="headerMsg"
            name="files"
            :action="actiontion"
            :on-success="success1"
            :file-list="fileList1"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="9"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传9个文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

上传附件HTML（多个）

<el-form-item label="营业执照附件：" prop="filePathList1" style="width:100%;">
          <el-upload
            class="upload-demo"
            v-model="filePathList1"
            :headers="headerMsg"
            name="files"
            :action="actiontion"
            :on-success="success1"
            :file-list="fileList1"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="9"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传9个文件，且不超过500kb</div>
          </el-upload>

<el-form-item label="体系认证证书：" prop="filePathList2" style="width:100%;">
          <el-upload
            class="upload-demo"
            v-model="filePathList2"
            :headers="headerMsg"
            name="files"
            :action="actiontion"
            :on-success="success2"
            :file-list="fileList2"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="9"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传9个文件，且不超过500kb</div>
          </el-upload>

上传附件JS（多个）

上传多个也只是把返回过来的值最后提交

success1(response, file, fileList){
      response.data[0].annexType = 1
      this.filePathList1.push( response.data[0])
      // console.log(this.filePathList1);
    },
    success2(response, file, fileList){
      console.log(response);
      response.data[0].annexType = 2
      this.filePathList2.push(response.data[0])
    },