前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >记录vue组件el-upload踩过的几个坑

记录vue组件el-upload踩过的几个坑

作者头像
星痕
发布2018-12-28 12:08:54
4.2K0
发布2018-12-28 12:08:54
举报
文章被收录于专栏:JAVA后端开发JAVA后端开发

最近在用el-upload这个组件,但发现有两个坑,主要是上传下载的时候。

  • 附件上传 附件上传需要调用后台的接口,而这个接口需要传token,这个具体要怎么做呢.
  1. 使用el-upload的header属性 示例如下:
代码语言:javascript
复制
<el-upload   
                  :before-upload="handleBeforeUpload"
                 :headers = "headers"
                 ....>...
                 </el-upload>
  1. 设置header属性
代码语言:javascript
复制
  return {
                headers: {
                    'x-auth-token': localStorage.getItem('token')  
                  //token为系统访问需要的,放在header中
                },
                ...
            };
  • 附件下载
  1. 下载有两个问题,点击文件名称,如何下载 该问题只要覆盖on-preview方法,
  2. 前后端分离,如何调用后台下载接口保存附件,一般下载是配置一个URL,但直接打开该URL是不行的,会缺少登陆验证的token, 这个里统一做了前端下载的封装
代码语言:javascript
复制
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踩过的几个坑。 欢迎点赞及留言评论,谢谢.

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.12.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档