一、使用了vue的element ui上傳組件

<el-form-item label="增加附件" prop="climb_cert" label-width="164px">
  <el-upload
    ref="upload"
    class="upload-demo"
    action="api/files_process/"
    :http-request="fileUpload"
    :file-list="fileList"
    :auto-upload="true"
    :show-file-list="true"
  >
    <el-button slot="trigger" size="small" type="primary" @click="setName('climb_cert')">點擊上傳</el-button>
  </el-upload>
</el-form-item>

二、在data中定義

export default {
  data() {
    return {
      fileName: '',
      fileList:[],
      calculatType: 'type',
    }
}

三、vue的methods中

setName(name) {
      this.fileName = name
    },
    fileUpload(param) {
      const loading = this.$loading({
        lock: true,
        text: '文件上傳中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const fd = new FormData()
      fd.append('file', param.file)// 傳文件
      fd.append('type', this.calculatType)// 傳文件
      axios({
        method: 'post',
        url: '/api/files_process/',
        headers: {
          'Authorization': this.token,
          'content-type': 'multipart/form-data; boundary=<calculated when request is sent>'
        },
        data: fd
      }).then(res => {
        this.calculatForm[this.fileName] = res.data.data.file
        if (res.data.code === 20000) {
          this.$message({
            message: '上傳成功',
            type: 'success'
          })
          loading.close()
        }
      })
    },

總結

以上是生活随笔為你收集整理的vue上传附件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。