一、确认是否在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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐