?

通過(guò)點(diǎn)擊或者拖拽上傳文件

Js

<!-- action表示圖片上傳后臺(tái)api地址 --> <el-upload:action="uploadURL":on-preview="handlePreview":on-remove="handleRemove"list-type="picture" ><el-button size="small" type="primary">點(diǎn)擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div> </el-upload>data---> // 上傳圖片的url uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload'

配置如下之后，并不代表就真正上傳了，此時(shí)，我們打開?Network?查看?Preview?，發(fā)現(xiàn)?msg?提示我們?無(wú)效 token，狀態(tài)碼為?400?，這代表并沒(méi)有上傳成功。

這是因?yàn)榇藭r(shí)上傳控件沒(méi)有使用?axios?發(fā)?ajax?請(qǐng)求，而是組件內(nèi)部自動(dòng)封裝了一個(gè)?ajax，因此也就不會(huì)調(diào)用下述請(qǐng)求攔截器了。

解決辦法是?Upload?組件有一個(gè)?headers?屬性，可以設(shè)置上傳的請(qǐng)求頭部。

第一步，在組件處添加?headers?屬性

第二步，在?data?中定義?headersObj?，然后添加請(qǐng)求頭對(duì)象。

操作完成后，可以看到提示消息?msg?顯示上傳成功，并且此時(shí)狀態(tài)碼也變?yōu)榱?200。

總結(jié)

以上是生活随笔為你收集整理的前端学习（2695）：重读vue电商网站16之Upload 上传组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。