重读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 ，这代表并没有上传成功。

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

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

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

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

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