vue文件以及图片上传的跨域（401）问题（组件使用的为element)

      本文主要是自己在做图片，文件上传时遇到的问题，由于后台是有token验证的，文件上传调取接口没有带有效的token,导致控制台一直报错，401跨域，

 

1：首先我们从element-ui组件库（https://element.eleme.cn/#/zh-CN/component/upload）copy上传组件:代码如下

<el-upload

class="upload-demo"

action="https://jsonplaceholder.typicode.com/posts/"

:on-preview="handlePreview"

:on-remove="handleRemove"

:before-remove="beforeRemove"

multiple

:limit="3"

:on-exceed="handleExceed"

:file-list="fileList">

<el-button size="small" type="primary">点击上传</el-button>

<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

</el-upload>

<script>

export default {

data() {

return {

fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]

};

},

methods: {

handleRemove(file, fileList) {

console.log(file, fileList);

},

handlePreview(file) {

console.log(file);

},

handleExceed(files, fileList) {

this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);

},

beforeRemove(file, fileList) {

return this.$confirm(`确定移除 ${ file.name }？`);

}

}

}

</script>

这里需要对上传组件总的几个参数做一个了解，详细可以看（https://element.eleme.cn/#/zh-CN/component/upload）

主要参数

action：上传路径，后台对应的一定是一个文件保存的方法，返回参数最好多一点，（id,路径，名称等）

before-upload：上传之前做什么，这个一般都要加大小以及各式验证

on-success：上传成功做什么，一般都是把返回参数获取到，然后擦入到关联表

multiple：是否启用多个，

到这里如果后台没有做token验证，以上一个参数写对就完全可以完成附件上传功能了

 

如果后台有token验证，则需要在加上一个关键参数

headers（头部参数，设置上传的请求头部）

一般这里面需要放我们从后台获取的token，注意这个地方还有一个坑，就是这个token不能直接获取，共用js里面的token,而是需要用动态方法获取，类似下面

因为在共用方法里面获取一次后，当我们不去主动刷新的时候，这个token是不会变的，也就导致长时间不操作，同样会出现token失效。token是登录的时候进行token获取并且通过localStorage.setItem("token", vulue);}永久保存的