el-upload增加token(element ui)

element ui 中的el-upload接口中是不传token的 如果后台没有加限制 上传文件会报token错误
下面介绍给el-upload增加token

<el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

这个是element-ui中el-upload的一个组件，在组件上加入headers，加完如下

<el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :headers="uploadHeaders"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

然后在data中定义uploadHeaders

data(){
    return {
        uploadHeaders:{"token":localStorage.getItem('token')}
    }
}

前面的token是可以随意去改变的，可以看系统中其他的接口比默认上传接口多传什么参数，修改即可
后面的localStorage.getItem('token')是从浏览器中获取已经存取在浏览器上的token
如此上传接口默认就已经传token了，再次上传文件，不再报参数错误