VUE前端如何處理后端接口返回的圖片詳解
更新時間：2024年09月28日 11:20:38 作者：我一個達(dá)不溜
在現(xiàn)代Web開發(fā)中,前端應(yīng)用經(jīng)常需要從后端接口獲取圖片數(shù)據(jù),下面這篇文章主要介紹了VUE前端如何處理后端接口返回的圖片的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
后端接口設(shè)計：
- setting中配置文件上傳路徑：
MEDIA_ROOT = BASE_DIR / 'yourFiles'
- 創(chuàng)建文件上傳模型，使用FileField模型字段存儲文件對象：
class UploadFile(models.Model): """上傳文件模型""" file = models.FileField('文件', help_text='文件上傳') info = models.JSONField('文件信息', help_text='文件信息', default=list, null=True, blank=True)
上傳的文件保存在項目目錄下的yourFiles目錄下，部署以后，存放在容器的/app/yourFiles目錄下
- 創(chuàng)建序列化器、配置urls等，在序列化器中新增一個方法，用于預(yù)覽圖片：
class UploadFileViewSet(viewsets.ModelViewSet): """文件上傳視圖集""" queryset = UploadFile.objects.all() serializer_class = UploadFileSerializer ... @action(['get'], detail=True) def show(self, request, pk, *args, **kwargs): # 獲取對象 try: instance = self.get_object() # instance.file.size() return FileResponse(instance.file.open(mode='rb')) except: return response.Response({'msg':'Not Found!'}, status=404)調(diào)用接口返回圖片文件：
前端處理
在axios封裝的api請求中新增：
// 查看圖片
showImg(id){
return api.get(`/upload/${id}/show/`, {responseType:'blob'}) // 后端返回的是一張圖片，這里一定要加responseType
},注意這里一定要新增 {responseType:'blob'}。后端返回的是一個圖片文件：
前端展示圖片的方法中通過window.URL獲取圖片文件的URL,作為img標(biāo)簽的src值：
this.imageUrl = window.URL.createObjectURL(response.data);
總結(jié)
到此這篇關(guān)于VUE前端如何處理后端接口返回的圖片的文章就介紹到這了,更多相關(guān)VUE處理后端接口返回圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了一看就會的vuex實現(xiàn)登錄驗證（附案例），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
本篇文章主要介紹了Vue2.0實現(xiàn)1.0的搜索過濾器功能實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
關(guān)于Vue中img動態(tài)拼接src圖片地址的問題
這篇文章主要介紹了關(guān)于Vue中img動態(tài)拼接src圖片地址的問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
基于前端VUE+ElementUI實現(xiàn)table行上移或下移功能(支持跨頁移動)
有時候需要前端實現(xiàn)上移和下移功能,下面這篇文章主要給大家介紹了關(guān)于如何基于前端VUE+ElementUI實現(xiàn)table行上移或下移(支持跨頁移動)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)拖拽式分割布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡易購物車頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要給大家介紹了關(guān)于Vue入門的相關(guān)資料，是一篇超完整的Vue入門教程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了Vue實現(xiàn)選擇城市功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05
vue中利用prop進(jìn)行父子通信時的注意事項總結(jié)
這篇文章主要給大家介紹了關(guān)于vue中利用prop進(jìn)行父子通信時的注意事項,文中通過實例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01
Monaco-editor 的 JSON Schema 配置及使用介紹
這篇文章主要為大家介紹了Monaco-editor 的 JSON Schema 配置及使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10