?

通過點擊或者拖拽上傳文件

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。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。