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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM