django和vue互傳圖片并進(jìn)行處理和展示
更新時(shí)間：2023年05月22日 10:55:15 作者：呂大娟
在項(xiàng)目中圖片上傳并附帶幾個(gè)參數(shù)的場(chǎng)景非常常見(jiàn),如果技術(shù)棧是Vue+Django的小伙伴就一定會(huì)遇到這個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于django和vue互傳圖片并進(jìn)行處理和展示的相關(guān)資料,需要的朋友可以參考下
----------記錄一下這兩天做的一個(gè)小demo
功能是要實(shí)現(xiàn)一個(gè)從前端傳給后端一張圖片，在后端完成目標(biāo)檢測(cè)后，傳給前端，前端接收后并展示。
一、前端上傳圖片到后端
1、這一部分要用到elelent ui的upload組件，代碼如下：
view中
<el-upload
:action="uploadURL"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handlesuccess">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>method中
handlePictureCardPreview(file) {
// 這個(gè)“file”里默認(rèn)包含了這張圖片的所有信息：名字，url...
console.log("打印下zi",file);
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},data中
uploadURL:process.env.VUE_APP_BASE_API，
這里邊on-preview是點(diǎn)擊文件列表中已上傳的文件時(shí)的鉤子，這個(gè)操作只是把本地圖片上傳到前端并展示到前端頁(yè)面中了。
2、要把它傳給后端的話，action這個(gè)鉤子需要這么寫(xiě)：
uploadURL:process.env.VUE_APP_BASE_API+"/test_moudle/test/",
也就是說(shuō)在后邊加上路由。
二、后端接收?qǐng)D片并檢測(cè)
1、首先接收?qǐng)D片
img = request.FILES.get('file')因?yàn)榍岸藗鞯臅r(shí)候并沒(méi)有給名字，直接就傳過(guò)來(lái)了，所以就按“file”名處理。
2、然后要對(duì)圖片進(jìn)行檢測(cè)，由于我的檢測(cè)代碼是寫(xiě)死的，它需要的是一個(gè)圖片路徑，如下所示，
parser.add_argument('--source', type=str, default='windmill/images/test', help='file/dir/URL/glob, 0 for webcam')所以我沒(méi)辦法把前端傳過(guò)來(lái)的圖片直接處理并輸入檢測(cè)網(wǎng)絡(luò)，最后只能把圖片保存一下，然后把保存路徑給檢測(cè)網(wǎng)絡(luò)：
img = request.FILES.get('file')
print('打印名稱和類(lèi)型',type(img),img)
base_dir = settings.BASE_DIR
upload_dir = os.path.join(base_dir, 'upload')
path = os.path.join(upload_dir, img.name)
with open(path, 'wb+') as f:
for chunk in img.chunks():
f.write(chunk)
timestrap = str(time.time())把路徑給檢測(cè)網(wǎng)絡(luò)
parser.add_argument('--source', type=str, default=path, help='file/dir/URL/glob, 0 for webcam')三、把檢測(cè)完的圖片傳給前端
這一步需要把圖片轉(zhuǎn)為base64形式的才能傳給前端
......這里省略了檢測(cè)代碼
res_path = os.path.join(base_dir, 'runs', 'detect', timestrap, img.name)
if os.path.exists(res_path):
print('有檢測(cè)結(jié)果吧')
with open(res_path, 'rb') as f:
data = f.read()
result['msg'] = bytes.decode(base64.b64encode(data))
else:
result['msg'] = '有圖片上傳但是沒(méi)有檢測(cè)結(jié)果'
else:
result['msg'] = '沒(méi)有圖片上傳'
return JsonResponse(result)四、前端接收base64圖片并展示
<div class="myres">
<img width="20%" :src="'data:image/png;base64,'+detect_picture">
</div> handlesuccess(response, file, fileList){
console.log("打印下",file,fileList);
this.detect_picture = response.msg;
},在這里頭接收后端的圖片時(shí)并處理的鉤子是upload組件中的on-success（on-success=“handlesuccess”）
然后需要注意的是展示圖片時(shí)，需要在src（路徑）前加'data:image/png;base64,'：
<img width="20%" :src="'data:image/png;base64,'+detect_picture">
這樣一個(gè)檢測(cè)小demo就完成了-----------
完整代碼
后端
def test(request):
result = {}
if request.method == 'POST':
#你要關(guān)注的 1、從前端接收?qǐng)D片
img = request.FILES.get('file')
print('打印名稱和類(lèi)型',type(img),img)
base_dir = settings.BASE_DIR # 當(dāng)前的最高級(jí)目錄（dvadmin-backend）
upload_dir = os.path.join(base_dir, 'upload') # 在主目錄下新建文件夾
path = os.path.join(upload_dir, img.name) # 把前端傳過(guò)來(lái)的圖片保存在新建的upload文件夾中
with open(path, 'wb+') as f:
for chunk in img.chunks():
f.write(chunk)
timestrap = str(time.time())
# 從這里開(kāi)始
parser = argparse.ArgumentParser()
# 1、選模型
# parser.add_argument('--weights', nargs='+', type=str, default='runs/train/exp/weights/best.pt', help='model.pt path(s)')
parser.add_argument('--weights', nargs='+', type=str,
default=r'D:\Desktop\lfj\code\實(shí)驗(yàn)結(jié)果\expyolov5s原2\weights\best.pt', help='model.pt path(s)')
# parser.add_argument('--source', type=str, default='windmill/images/test', help='file/dir/URL/glob, 0 for webcam')
parser.add_argument('--source', type=str, default=path, help='file/dir/URL/glob, 0 for webcam')
# parser.add_argument('--source', type=str, default=img, help='file/dir/URL/glob, 0 for webcam')
# 輸入圖片的大小 默認(rèn)640
parser.add_argument('--imgsz', '--img', '--img-size', type=int, default=640, help='inference size (pixels)')
# 置信度閾值 默認(rèn)0.25
parser.add_argument('--conf-thres', type=float, default=0.25, help='confidence threshold')
# 做Nms的iou閾值
parser.add_argument('--iou-thres', type=float, default=0.45, help='NMS IoU threshold')
# 保留的最大檢測(cè)框數(shù)量，每張圖片中檢測(cè)目標(biāo)的個(gè)數(shù)最多為1000類(lèi)
parser.add_argument('--max-det', type=int, default=1000, help='maximum detections per image')
# 設(shè)置設(shè)備CPU/GPU，這個(gè)可以不用設(shè)置
parser.add_argument('--device', default='', help='cuda device, i.e. 0 or 0,1,2,3 or cpu')
# 是否展示預(yù)測(cè)之后的圖片
parser.add_argument('--view-img', action='store_true', help='show results')
# 是否將預(yù)測(cè)的框坐標(biāo)以txt文件形式保存，默認(rèn)False，使用save-txt在路徑runs/detect/exp/labels/.txt下生成每張圖片預(yù)測(cè)的txt文件
parser.add_argument('--save-txt', action='store_true', help='save results to *.txt')
# 是否將置信度conf也保存到txt文件中
parser.add_argument('--save-conf', action='store_true', help='save confidences in --save-txt labels')
parser.add_argument('--save-crop', action='store_true', help='save cropped prediction boxes')
parser.add_argument('--nosave', action='store_true', help='do not save images/videos')
# 設(shè)置只保留某一部分類(lèi)別，形如0或者0 2 3
parser.add_argument('--classes', nargs='+', type=int, help='filter by class: --class 0, or --class 0 2 3')
parser.add_argument('--agnostic-nms', action='store_true', help='class-agnostic NMS')
parser.add_argument('--augment', action='store_true', help='augmented inference')
parser.add_argument('--visualize', action='store_true', help='visualize features')
parser.add_argument('--update', action='store_true', help='update all models')
# 保存測(cè)試日志的文件夾路徑
parser.add_argument('--project', default='runs/detect', help='save results to project/name')
# 用時(shí)間戳生成文件夾timestrap 保存測(cè)試日志文件夾的名字，所以最終保存在project/name中
parser.add_argument('--name', default=timestrap, help='save results to project/name')
#
parser.add_argument('--exist-ok', action='store_true', help='existing project/name ok, do not increment')
# 畫(huà)框的線條粗細(xì)---
parser.add_argument('--line-thickness', default=3, type=int, help='bounding box thickness (pixels)')
parser.add_argument('--hide-label s', default=False, action='store_true', help='hide labels')
parser.add_argument('--hide-conf', default=False, action='store_true', help='hide confidences')
parser.add_argument('--half', action='store_true', help='use FP16 half-precision inference')
opt = parser.parse_args(args=[])
main(opt)
# 到這里結(jié)束，這些你都不用管
# 2、圖片傳給前端
# 找到剛剛檢測(cè)的圖片，并把它轉(zhuǎn)為base64形式，傳給前端
res_path = os.path.join(base_dir, 'runs', 'detect', timestrap, img.name)
if os.path.exists(res_path):
print('有檢測(cè)結(jié)果吧')
with open(res_path, 'rb') as f:
data = f.read()
result['msg'] = bytes.decode(base64.b64encode(data))
else:
result['msg'] = '有圖片上傳但是沒(méi)有檢測(cè)結(jié)果'
else:
result['msg'] = '沒(méi)有圖片上傳'
return JsonResponse(result)前端
<template>
<div class="container">
<!-- <div class="mysel" style="margin-bottom: 20px;">
<el-select v-model="value" placeholder="請(qǐng)選擇檢測(cè)模型" >
</el-select>
</div> -->
<el-upload
:action="uploadURL"
list-type="picture-card"
multiple
:limit="6"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handlesuccess">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<el-button icon="" type="text" @click="but_test">
點(diǎn)擊識(shí)別
</el-button>
<div class="myres">
<img width="20%" :src="'data:image/png;base64,'+detect_picture">
</div>
</div>
</template>
<script>
import request from "@/utils/request";
import axios from "axios";
export default {
components: {
},
data() {
return {
// 圖片要傳到服務(wù)端的哪里(路由=process.env.VUE_APP_BASE_API+你要傳圖片的接口)
uploadURL:process.env.VUE_APP_BASE_API+"/test_moudle/updateinfo/",
// 前端上傳的圖片的地址
dialogImageUrl: '',
dialogVisible: false,
// 后端傳過(guò)來(lái)的圖片的base64形式
detect_picture: '',
queryParams: {
ipaddr: undefined,
userName: undefined
},
};
},
computed: {
},
watch: {
},
activeId: {
},
mounted() {
},
created(){
// this.visualize_data()
},
methods: {
// 測(cè)試前后端是否連通的函數(shù)
visualize_data() {
return request({
url: "/test_moudle/test", //get請(qǐng)求最后沒(méi)有'/'
method: "get",
}).then(response=>{
console.log('怎么可以這樣',response)
});
},
// 處理圖片預(yù)覽效果
handlePreview(){},
// 處理移除圖片的操作
handleRemove(file, fileList) {
console.log(file, fileList);
},
// 點(diǎn)擊文件列表中已上傳的文件時(shí)的鉤子
handlePictureCardPreview(file) {
// 這個(gè)“file”里默認(rèn)包含了這張圖片的所有信息：名字，url...
console.log("打印下zi",file);
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
but_test(){
console.log("這個(gè)函數(shù)是否執(zhí)行")
this.uploadURL = process.env.VUE_APP_BASE_API+"/test_moudle/test/";
},
// 用這個(gè)函數(shù)去接收后端傳過(guò)來(lái)的圖片
handlesuccess(response, file, fileList){
console.log("打印下",file,fileList);
this.detect_picture = response.msg;
},
/** 重置按鈕操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 搜索按鈕操作 */
handleQuery() {
this.pageNum = 1;
// this.getList();
},
}
};
</script>寫(xiě)了3個(gè)demo，前端沒(méi)變哈哈哈哈，變得只是后端怎么處理圖片，怎么傳給前端
總結(jié)
到此這篇關(guān)于django和vue互傳圖片并進(jìn)行處理和展示的文章就介紹到這了,更多相關(guān)django vue互傳圖片展示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
推薦8款常用的Python GUI圖形界面開(kāi)發(fā)框架
這篇文章主要介紹了推薦8款常用的Python GUI圖形界面開(kāi)發(fā)框架,需要的朋友可以參考下2020-02-02
詳解python實(shí)現(xiàn)小波變換的一個(gè)簡(jiǎn)單例子
這篇文章主要介紹了詳解python實(shí)現(xiàn)小波變換的一個(gè)簡(jiǎn)單例子，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
一文詳解Python為什么要寫(xiě)__init__.py
這篇文章主要介紹了Python為什么要寫(xiě)__init__.py的相關(guān)資料,__init__.py文件可以包含包的初始化環(huán)境變量、公共接口、包的信息以及通過(guò)__all__變量控制模塊的公開(kāi)接口,需要的朋友可以參考下2025-03-03
python opencv實(shí)現(xiàn)證件照換底功能
這篇文章主要為大家詳細(xì)介紹了python opencv實(shí)現(xiàn)證件照換底功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
python?Sweetviz探索性數(shù)據(jù)可視化分析庫(kù)使用特征詳解
這篇文章主要為大家介紹了python?Sweetviz探索性數(shù)據(jù)可視化分析庫(kù)特征使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
大家好，本篇文章主要講的是python自定義封裝帶顏色的logging模塊，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下2022-02-02
對(duì)pandas讀取中文unicode的csv和添加行標(biāo)題的方法詳解
今天小編就為大家分享一篇對(duì)pandas讀取中文unicode的csv和添加行標(biāo)題的方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Python 轉(zhuǎn)換時(shí)間戳為指定格式日期
這篇文章主要為大家介紹了Python轉(zhuǎn)換時(shí)間戳，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
在Django的模型和公用函數(shù)中使用惰性翻譯對(duì)象
這篇文章主要介紹了在Django的模型和公用函數(shù)中使用惰性翻譯對(duì)象,Django是豐富多彩的Python框架中人氣最高的一個(gè),需要的朋友可以參考下2015-07-07
Python之Anaconda啟動(dòng)過(guò)程中的異常錯(cuò)誤問(wèn)題及解決
這篇文章主要介紹了Python之Anaconda啟動(dòng)過(guò)程中的異常錯(cuò)誤問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09