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