vue element-ui upload 實現帶token上傳
阿新 • • 發佈:2018-11-30
<el-upload class="upload-demo" :data ="uploadData" :headers = "headers" action="http://test/post" :show-file-list="false" style="float: right;" list-type="picture" accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp" :on-success="upSuccess" multiple> <el-button size="small" class= "variantBtn" type="text">{{$t("edit.addImg")}}</el-button> </el-upload>
:header 在裡面寫要攜帶的token的引數,:data 是攜帶一同傳過去的資料的引數
import util from '@/libs/util.js' export default { data () { return { uploadData: { type: 1 }, headers: { Authorization: util.cookies.get('token') //從cookie裡獲取token,並賦值 Authorization ,而不是token }, } }, methods: { //上傳成功後操作 upSuccess (res, f, fl) { this.showNotify(1, this.$t('btn.upload')) }, //彈框訊息封裝 showNotify (status, val) { if (status === 1) { this.$notify({ title: this.$t('msg.succeed'), message: val + this.$t('msg.succeed'), type: 'success', duration: 2000 }) } else if (status === 0) { this.$notify({ title: this.$t('msg.error'), message: val + this.$t('msg.error'), type: 'error', duration: 2000 }) } else { this.$notify({ title: this.$t('msg.error'), message: this.$t('msg.sysError'), type: 'error', duration: 2000 }) } }, } }