最近在用el-upload这个组件，但发现有两个坑，主要是上传下载的时候。
- 附件上传
附件上传需要调用后台的接口，而这个接口需要传token,这个具体要怎么做呢.
- 使用el-upload的header属性
示例如下：
<el-upload
:before-upload="handleBeforeUpload"
:headers = "headers"
....>...
</el-upload>
- 设置header属性
return {
headers: {
'x-auth-token': localStorage.getItem('token')
//token为系统访问需要的,放在header中
},
...
};
- 附件下载
- 下载有两个问题，点击文件名称，如何下载
该问题只要覆盖on-preview方法， - 前后端分离，如何调用后台下载接口保存附件，一般下载是配置一个URL,但直接打开该URL是不行的，会缺少登陆验证的token,
这个里统一做了前端下载的封装
export const AjaxDownloadFile = (url, param,fileName) => {
return axios({
method: 'get',
url: url.indexOf('http') > -1 ? `${url}` : `${base1}/${url}`,
data: param,
responseType: 'blob'
}).then(data => {
{
if (!data) {
return
}
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
}
});
};
上述就是我在使用el-upload踩过的几个坑。
欢迎点赞及留言评论,谢谢.
