vue后台管理项目中element-ui中的upload组件

1.upload组件请求头

在做后台管理项目的时候，只要用户正确登录后，浏览器获取到token,才能继续操作后续的页面。后续页面需要获取到登录时所提供的的token。
此时需要在main.js文件中配置一下header请求头中的Authorization字段。

axios.interceptors.request.use(config => {
console.log(config);
config.headers.Authorization = window.sessionStorage.getItem('token');
return config;
});

但是在element-ui的upload组件中，它自己封装了一套请求头的函数，并没有使用我们全局配置的ajax请求，所以在使用的时候要注意。

<!-- action表示图片要上传到的后台API地址 -->
<el-upload
:action="uploadURL"
:on-preview="handlePreview"
:on-remove="handleRemove"
list-type="picture"
:headers="headerObj"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>

//图片上传组件的请求头对象
headerObj: {
Authorization:
window.sessionStorage.getItem('token')
}

2.upload组件中个参数的使用

:on-preview=“handlePreview”

//处理图片预览效果
handlePreview(file) {
console.log(file);
this.previewPath = file.response.data.url;
this.previewVisible = true;

:on-remove=“handleRemove”

//处理移除图片的操作
handleRemove(file) {
console.log(file);
//1.获取将要删除的图片的临时路径
const filePath = file.response.data.tmp_path;
//2.从pics数组中找到这个图片对应的索引
const i = this.addForm.pics.findIndex(x => x.pic === filePath);
//3.调用数组的splice方法把图片信息对象从pics数组中移除
this.addForm.pics.splice(i, 1);
console.log(this.addForm);

移除一张图片后，pics数组中的值为1.

在upload组件中，各属性都有触发时的数据类型，具体情况请点击下面的链接：
upload组件

• 点赞
• 收藏
• 分享
• 文章举报