快捷導(dǎo)航

VUE前端如何處理后端接口返回的圖片詳解

更新時(shí)間：2024年09月28日 11:20:38 作者：我一個(gè)達(dá)不溜

在現(xiàn)代Web開(kāi)發(fā)中,前端應(yīng)用經(jīng)常需要從后端接口獲取圖片數(shù)據(jù),下面這篇文章主要介紹了VUE前端如何處理后端接口返回的圖片的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(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è)圖片文件：

前端展示圖片的方法中通過(guò)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)文章

vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue使用三種方法刷新頁(yè)面
這篇文章說(shuō)明了如何使用Vue去刷新當(dāng)前頁(yè)面的多種方法實(shí)例,有完成的代碼提供參考,希望對(duì)你有所幫助
2021-06-06
vue如何隨心所欲調(diào)整el-dialog中body的樣式
這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue+Element?UI實(shí)現(xiàn)復(fù)制當(dāng)前行數(shù)據(jù)的功能
這篇文章主要介紹了如何使用Vue?+?Element?UI?實(shí)現(xiàn)在列表的操作欄新增一個(gè)復(fù)制按鈕,復(fù)制當(dāng)前行的數(shù)據(jù)可以打開(kāi)新增彈窗后亦可以跳轉(zhuǎn)到新增頁(yè)面,感興趣的小伙伴可以參考下
2023-11-11
vue配置vue.config.js超詳細(xì)教程
Vue的配置項(xiàng)'vue.config.js'是用來(lái)配置Vue項(xiàng)目的構(gòu)建配置的,它是一個(gè)可選的配置文件,放置在項(xiàng)目的根目錄下,這篇文章主要給大家介紹了關(guān)于vue配置vue.config.js的相關(guān)資料,需要的朋友可以參考下
2024-01-01
對(duì)vue中的事件穿透與禁止穿透實(shí)例詳解
今天小編就為大家分享一篇對(duì)vue中的事件穿透與禁止穿透實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解讀之Component組件注冊(cè)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue中的provide/inject的學(xué)習(xí)使用
本篇文章主要介紹了vue中的provide/inject的學(xué)習(xí)使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-05-05
vue-json-viewer展示JSON內(nèi)容實(shí)踐
這篇文章主要介紹了vue-json-viewer展示JSON內(nèi)容實(shí)踐,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2026-03-03
Vue 級(jí)聯(lián)下拉框的設(shè)計(jì)與實(shí)現(xiàn)
在前端開(kāi)發(fā)中，級(jí)聯(lián)選擇框是經(jīng)常用到的，這樣不僅可以增加用戶(hù)輸入的友好性，還能減少前后端交互的數(shù)據(jù)量。本文就介紹一下使用Vue實(shí)現(xiàn)級(jí)聯(lián)下拉框，感興趣的可以了解一下
2021-07-07