解决Vue项目中使用element-ui组件中el-upload上传图片失败的问题
使用element-ui组件库中的el-upload上传图片,token报错等的相关处理
·
一、确认是否在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')
},
更多推荐
已为社区贡献4条内容
所有评论(0)