element upload 上传方式、传参、token

2020-11-12  本文已影响0人  撑船的摆渡人

整理一下关于Element-UI中关于 上传组件使用的一些小技巧
可以分为使用action默认方式 和 不使用 action

使用默认 action 方式上传

// html
<el-upload
      class="upload-demo"
      drag
      :data="myData"
      :headers="myHeaders"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      action="fileUpload">

// script
data() {
    return {
      fileUpload: process.env.VUE_APP_BASE_API + '/upload/import', // 文件上传地址
      myHeaders: { Authorization: getToken() }, // 传token
      myData: { type:params.type } // 传参数
    }
  },

不使用 默认 action 方式上传

// html
<el-upload
      class="upload-demo"
      drag
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :http-request="handleUploadFile"
      action="#">

// script
methods: {
    handleUploadFile(params) {
      const fd = new FormData()
      fd.append('file', params.file)
      fd.append('type', this.params.type)
      uploadFile(fd).then(res => {
        console.log(res, 'sucess')
      }).catch(err => {
        console.log(err, 'error')
      })
    }
}
上一篇下一篇

猜你喜欢

热点阅读