一、确认是否在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')
            },

Logo

前往低代码交流专区

更多推荐