基于vue-cli中基于element-ui的Upload 上传文件，异步上传

￡神魔★判官ぃ 2022-04-08 14:59 548阅读 0赞

做项目时遇到上传excel文件到后台，项目使用的是elementUI组件，直接使用element的Upload上传，但是需求是需要用户选择完文件，并且输入文件描述，然后一起上传到后台，类似于form表单提交

（1）.vue html

<div class="user-search-body">
              <el-form inline
                       :model="form"
                       label-width="80px">
                <el-form-item label="版本号:"
                              style="text-align:left">
                  <el-input placeholder="请输入版本号"
                            v-model="form.versionCode"
                            clearable
                            style="width:200px;">
                  </el-input>
                </el-form-item>
                <el-form-item label="版本描述:"
                              class="describelabel">
                  <el-input placeholder="请输入描述内容"
                            v-model="form.descript"
                            clearable>
                  </el-input>
                </el-form-item>
                
                <el-upload class="upload-box"
                           action=""//默认自动上传是的url 可以为空，但必填，否则会报错
                           accept=".xls,.xlsx"
                           :limit='1'
                           :before-remove="beforeRemove"
                           :file-list="fileList"
                           :on-change="changeFile"
                           :on-exceed="handleExceed"
                           :auto-upload="false" //false 阻止其自动上传>
                  <el-button slot="trigger"
                             size="small"
                             type="primary">上传车型库</el-button>
                  <div slot="tip"
                       class="el-upload__tip">请选择xls/xlsx文件上传</div>
                </el-upload>
                
              </el-form>
              <div class="submit-edit">
                <el-button size="medium"
                           @click.native.prevent="cancel">取消</el-button>
    
                <el-button class="sub-btn"
                           size="medium"
                           type="primary"
                           @click.native.prevent="submitFiles">提交</el-button>
              </div>
            </div>

（2）js

export default {
      data () {
        return {
          fileList: [], // 文件临时存放列表
          form: {
            versionCode: '',
            descript: '',
            file: '' // file文件
          }
    
        }
      },
      mounted () {
        if (this.$route.matched[this.$route.matched.length - 1].name === 'appcartsedit') {
          this.$store.commit('setAppCartsEditOff', false)
        }
      },
      watch: {
    
      },
      methods: {
        submitFiles () {
          var that = this
    //将需要提交的文件，和附带的数据，append  FormData中 然后提交
          var formData = new FormData()
          let bToken = localStorage.getItem('btoken')
          formData.append('file', this.form.file)
          formData.append('versionCode', this.form.versionCode)
          formData.append('descript', this.form.descript)
          formData.append('vwToken', bToken)
          that.sendFile(formData)
        },
        sendFile (data) {
          const loading = this.$loading({
            lock: true,
            text: '文件上传中请稍等...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.$post('/b/carModel/createCarModelVersion', data).then(req => {
            console.log(req)
            loading.close()
            if (req.code === 10000) {
              this.$message({
                showClose: true,
                message: '上传成功',
                type: 'success'
              })
              this.formReset()// 上传成功清空
              this.$router.push({ name: 'appcartsconfig' })
            }
          }).catch(err => {
            console.log(err)
          })
        },
    
        changeFile (file, fileList) {
          console.log('change', file, file.raw)
          this.form.file = file.raw
        },
        handleExceed (files, fileList) {
          this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length} 个文件`)
        },
        beforeRemove (file, fileList) {
          return this.$confirm(`确定移除 ${file.name}？`)
        },
        formReset () { // 重置
          this.form = {
            versionCode: '',
            descript: '',
            file: '' // file文件
          }
        }
    
      }
    }

（3）在发送post请求时，由于项目中写了拦截器和全局配置，所以需要针对上传文件接口单独配置请求头和数据整理(qs)，

上传文件的formdata不要使用Qs.stringify(config.data)整理，否则后台拿不到文件数据，具体配置请看 [vue axios封装http拦截和公用请求][vue axios_http]

config.headers = {
            'Content-Type': 'multipart/form-data'
          }

（4）后面就是需要后台支持了，让他们用MultipartFile接收就行

[vue axios_http]: https://blog.csdn.net/csl125/article/details/85070597