django-vue互傳圖片並處理和展示

呂大娟 2022-07-24 01:42:22 阅读数:51

django-vuedjangovue展示

----------記錄一下這兩天做的一個小demo

功能是要實現一個從前端傳給後端一張圖片,在後端完成目標檢測後,傳給前端,前端接收後並展示。

一、前端上傳圖片到後端

1、這一部分要用到elelent uiupload組件,代碼如下:
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) {

// 這個“file”裏默認包含了這張圖片的所有信息:名字,url...
console.log("打印下zi",file);
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},

data中

uploadURL:process.env.VUE_APP_BASE_API,

這裏邊on-preview點擊文件列錶中已上傳的文件時的鉤子,這個操作只是把本地圖片上傳到前端並展示到前端頁面中了。
2、要把它傳給後端的話,action這個鉤子需要這麼寫:

uploadURL:process.env.VUE_APP_BASE_API+"/test_moudle/test/",

也就是說在後邊加上路由。

二、後端接收圖片並檢測

1、首先接收圖片

 img = request.FILES.get('file')

因為前端傳的時候並沒有給名字,直接就傳過來了,所以就按“file”名處理。
2、然後要對圖片進行檢測,由於我的檢測代碼是寫死的,它需要的是一個圖片路徑,如下所示,

parser.add_argument('--source', type=str, default='windmill/images/test', help='file/dir/URL/glob, 0 for webcam')

所以我沒辦法把前端傳過來的圖片直接處理並輸入檢測網絡,最後只能把圖片保存一下,然後把保存路徑給檢測網絡:

img = request.FILES.get('file')
print('打印名稱和類型',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())

把路徑給檢測網絡

 parser.add_argument('--source', type=str, default=path, help='file/dir/URL/glob, 0 for webcam')

三、把檢測完的圖片傳給前端

這一步需要把圖片轉為base64形式的才能傳給前端

 ......這裏省略了檢測代碼
res_path = os.path.join(base_dir, 'runs', 'detect', timestrap, img.name)
if os.path.exists(res_path):
print('有檢測結果吧')
with open(res_path, 'rb') as f:
data = f.read()
result['msg'] = bytes.decode(base64.b64encode(data))
else:
result['msg'] = '有圖片上傳但是沒有檢測結果'
else:
result['msg'] = '沒有圖片上傳'
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;
},

在這裏頭接收後端的圖片時並處理的鉤子是upload組件中的on-success(on-success=“handlesuccess”)
然後需要注意的是展示圖片時,需要在src(路徑)前加'data:image/png;base64,'

<img width="20%" :src="'data:image/png;base64,'+detect_picture">

這樣一個檢測小demo就完成了-----------

版权声明:本文为[呂大娟]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/205/202207240141247643.html