鍍金池/ 問(wèn)答/HTML/ element-ui Upload組件中的http-request覆蓋默認(rèn)上傳行

element-ui Upload組件中的http-request覆蓋默認(rèn)上傳行為怎么使用???

element-ui Upload組件中的http-request覆蓋默認(rèn)上傳行為怎么使用???
不使用action屬性。
求大神指點(diǎn)。

回答
編輯回答
厭惡我

demo演示
HTml 部分 ,action是必傳的,所以為了避免報(bào)錯(cuò),形式上給個(gè)字符串就可以了。

<!--圖片上傳-->
  <el-upload
    class="avatar-uploader"
    action="string"
    :http-request="upload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
      <div  class="avatar">
        <img v-if="img.img_url" :src="img.img_url" @click="getIdx($index)" class="avatar-img">
        <i v-else class="el-icon-plus avatar-uploader-icon" @click="getIdx($index)"></i>
      </div>
  </el-upload>

JS部分
通過(guò)item參數(shù)可以拿到upload組件所有的參數(shù)。item.file則是這個(gè)文件。其他的邏輯操作跟之前默認(rèn)的action是一致的。

// 自定義文件上傳的方式
  upload (item) {
    let formData = new FormData()
    formData.append('file', item.file)
    formData.append('type', 'SKU')
    formData.append('id', this.$route.params.id)
    console.log('上傳圖片接口-參數(shù)', item.file)
    upLoadPicFromWeApp(formData).then(res => {
      console.log('上傳圖片接口-數(shù)據(jù)', res)
      this.formInline.pic_data[this.picIdx].img_url = res.msg
    }).catch(err => {
      this.$message.error('上傳失敗,請(qǐng)重新上傳')
      console.log('報(bào)錯(cuò)', err)
    })
  }
2017年8月28日 13:43
編輯回答
傲嬌范

除了before-upload以外, on-success這些組件自帶的鉤子大多都沒(méi)用, 可以去掉, 用以http-request代替, 傳一個(gè)函數(shù), 默認(rèn)參數(shù)是這個(gè)組件的所有屬性的一個(gè)對(duì)象, 可以從中拿到file屬性, 然后自己寫(xiě)上傳邏輯.

:http-request="uploadImg"
2017年12月28日 03:44