美文网首页
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