0
点赞
收藏
分享

微信扫一扫

重读vue电商网站16之Upload 上传组件

Js
<!-- action表示图片上传后台api地址 -->
<el-upload
:action="uploadURL"
:on-preview="handlePreview"
:on-remove="handleRemove"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
data--->
// 上传图片的url
uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload'

配置如下之后,并不代表就真正上传了,此时,我们打开 Network 查看 Preview ,发现 msg 提示我们 无效 token,状态码为 400 ,这代表并没有上传成功。

重读vue电商网站16之Upload 上传组件_vue.js

 

这是因为此时上传控件没有使用 axios 发 ajax 请求,而是组件内部自动封装了一个 ajax,因此也就不会调用下述请求拦截器了。

重读vue电商网站16之Upload 上传组件_ecmascript_02

 

解决办法是 Upload 组件有一个 headers 属性,可以设置上传的请求头部。

重读vue电商网站16之Upload 上传组件_vue.js_03

 

第一步,在组件处添加 headers 属性

重读vue电商网站16之Upload 上传组件_上传_04

 

第二步,在 data 中定义 headersObj ,然后添加请求头对象。

重读vue电商网站16之Upload 上传组件_ajax_05

 

操作完成后,可以看到提示消息 msg 显示上传成功,并且此时状态码也变为了 200。

重读vue电商网站16之Upload 上传组件_javascript_06

 

举报

相关推荐

0 条评论