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

猜你喜欢

转载自www.cnblogs.com/ruyan-yang/p/10044379.html