zoukankan      html  css  js  c++  java
  • 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
            })
          }
        },
      }
    }
    
  • 相关阅读:
    VMware安装虚拟机(Ubuntu)
    鼠标拖拽事件
    css层叠样式表
    html--form表单常用操作
    python学习之HTML-table标签
    python之web前端day01
    字符串各种操作,关于字符串的内置函数
    正则中匹配次数的问题
    re模块
    Github网站打不开的问题
  • 原文地址:https://www.cnblogs.com/ruyan-yang/p/10044379.html
Copyright © 2011-2022 走看看