vue多文件上传

1 结构

<el-form :model="form" label-width="120px" :rules="rules" ref="form">
        <el-form-item label="人才姓名" prop="name">
          <el-input v-model="form.name" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上传附件">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="#"
            name="files"
            :multiple="true"
            :show-file-list="true"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :file-list="fileList"
            :headers="headers"
            :auto-upload="false"
          >
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

2 注解

action="#"  （必选参数，上传的地址）  上传多文件时文件只是暂存本地，并不需要调上传接口，而是最后和数据一起提交到服务器，这里可以不给action的值，但是组件里必须要写action属性，否下会报错。

name="files" （上传的文件字段名） 组件中默认上传时文件的属性名为file，根据后端要求的字段名进行传值，可以通过name属性更改。

:multiple="true"  （设置是否多文件上传）

:show-file-list="true"（是否显示已上传文件列表）

:headers="headers"（设置上传的请求头部）

headers: {

      Authorization: 'Bearer ' + getToken()  //携带token

 }

:auto-upload="false"（是否在选取文件后立即进行上传） 默认值为true自动上传

:on-change="handleChange" （文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用），函数参数为file、fileList，可以获取当前改变的文件和文件列表。

:on-remove="handleRemove"（删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。）

handleRemove(file, fileList){

        this.fileList=fileList

},

handleChange(file, fileList) {

        this.fileList=fileList

},

3 上传

当有文件和数据一起上传时，常使用FormData构造函数，利用axios把FormData对象发送给服务器

1.首先new FormData()，得到一个FormData对象

2.append(键，值)可以向空白的FormData中追加键值对的数据

3.键 数据项的名字，必须是字符串 ， 值 数据项的值，可以是任意类型的数据

this.fileData = new FormData() // new formData对象
      if (this.fileList.length === 0) {
      } else {
        this.fileList.forEach((item) => {
          this.fileData.append('files', item.raw)
        })
      }
      this.fileData.append('name', this.form.name)
      this.fileData.append('needId', this.id)
      this.fileData.append('phone', this.form.phone)
      axios({
        url:process.env.VUE_APP_BASE_API + "/portal/flexibleAttractApply",
        data:this.fileData,
        method:'post',
        headers: {
          Authorization: "Bearer " + getToken(),
        },
      }).then((response) => {
        if (response.code == 200) {
          this.$message.success('申请成功')
          this.dialogFormVisible = false
        }else{
            const msg=response.data.msg
            this.$message.error(msg)
            this.dialogFormVisible=false
        }
      })
    }

4 注意事项

1.向后端传输FormData数据，Content-Type 的类型一定得是 multipart/form-data。

2.上传文件的请求体添加其他参数时必须要添加到FormData。如果请求boby里如果存在非FormData数据类型时，浏览器不会识别数据FormData，Content-Type不会自动添加为multipart/form-data，而是变成了application/json，后端便拿不到文件数据了。

3.这里使用的是原生axios，如果已经封装的axios中Content-Type设置的类型'application/json;charset=utf-8'，那么使用原生axios进行FormData数据上传。

4.使用原生axios直接向后端传输数据时，没有使用响应拦截器，注意后端返回msg信息展示。