解决Vue项目中使用element-ui组件中el-upload上传图片失败的问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
一、确认是否在vue项目文件elements.js中注册了Upload的使用
import Vue from 'vue'
import { Upload } from 'element-ui'
Vue.use(Upload)
二、如果使用了eslint严格检测语法,则需要确定el-upload标签中设置的所有属性和方法是否已经预定义在JS代码片段中。例如:
<!-- action表示图片要上传到的API地址,on-preview触发图片预览事件
on-remove移除图片时触发的事件
list-type图片当前渲染出来的效果 -->
<el-upload
:on-success="handlesuccess"
:headers="headerOdj"
:action="uploadUrl"
:on-preview="handlePreview"
:on-remove="handleRemove"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
三、重新设置upload标签的请求头是最重要的,因为element-ui组件库中的upload这个组件上传图片并没有使用我们自己在项目中定义的Axios请求,而是使用了组件库中自己封装的。所以需要在upload中重新设置符合项目需求的请求头。
例如:在vue项目项目开发中,登录注册一个应用,进行后续相关网页访问都是需要携带token,才能有权限继续访问的。所以在upload这个组建中也需要携带这个特定的请求头。upload中的headers就是用来重新设置请求头的。
headerOdj: {
Authorization: window.sessionStorage.getItem('token')
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)