1. 程式人生 > >vue element-ui upload 實現帶token上傳

vue element-ui upload 實現帶token上傳

<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
        })
      }
    },
  }
}