美文网首页
element upload 上传方式、传参、token

element upload 上传方式、传参、token

作者: 撑船的摆渡人 | 来源:发表于2020-11-12 18:32 被阅读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')
      })
    }
}

相关文章

网友评论

      本文标题:element upload 上传方式、传参、token

      本文链接:https://www.haomeiwen.com/subject/psipbktx.html