django和vue互傳圖片并進行處理和展示

更新時間：2023年05月22日 10:55:15 作者：呂大娟

在項目中圖片上傳并附帶幾個參數(shù)的場景非常常見,如果技術(shù)棧是Vue+Django的小伙伴就一定會遇到這個需求,下面這篇文章主要給大家介紹了關(guān)于django和vue互傳圖片并進行處理和展示的相關(guān)資料,需要的朋友可以參考下

一、前端上傳圖片到后端

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) {
      // 這個“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')

所以我沒辦法把前端傳過來的圖片直接處理并輸入檢測網(wǎng)絡(luò)，最后只能把圖片保存一下，然后把保存路徑給檢測網(wǎng)絡(luò)：

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())

把路徑給檢測網(wǎng)絡(luò)

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

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

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

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

完整代碼

后端

def test(request):
    result = {}
    if request.method == 'POST':
    #你要關(guān)注的 1、從前端接收圖片
        img = request.FILES.get('file')
        print('打印名稱和類型',type(img),img)
        base_dir = settings.BASE_DIR                   # 當前的最高級目錄（dvadmin-backend）
        upload_dir = os.path.join(base_dir, 'upload')  # 在主目錄下新建文件夾
        path = os.path.join(upload_dir, img.name)      # 把前端傳過來的圖片保存在新建的upload文件夾中
        with open(path, 'wb+') as f:
            for chunk in img.chunks():
                f.write(chunk)
        timestrap = str(time.time())
# 從這里開始
        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\實驗結(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')
        # 輸入圖片的大小  默認640
        parser.add_argument('--imgsz', '--img', '--img-size', type=int, default=640, help='inference size (pixels)')
        # 置信度閾值  默認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')
        # 保留的最大檢測框數(shù)量，每張圖片中檢測目標的個數(shù)最多為1000類
        parser.add_argument('--max-det', type=int, default=1000, help='maximum detections per image')
        # 設(shè)置設(shè)備CPU/GPU，這個可以不用設(shè)置
        parser.add_argument('--device', default='', help='cuda device, i.e. 0 or 0,1,2,3 or cpu')
        # 是否展示預(yù)測之后的圖片
        parser.add_argument('--view-img', action='store_true', help='show results')
        # 是否將預(yù)測的框坐標以txt文件形式保存，默認False，使用save-txt在路徑runs/detect/exp/labels/.txt下生成每張圖片預(yù)測的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è)置只保留某一部分類別，形如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')
        # 保存測試日志的文件夾路徑
        parser.add_argument('--project', default='runs/detect', help='save results to project/name')
        # 用時間戳生成文件夾timestrap  保存測試日志文件夾的名字，所以最終保存在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')
        # 畫框的線條粗細---
        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、圖片傳給前端
        # 找到剛剛檢測的圖片，并把它轉(zhuǎn)為base64形式，傳給前端
        res_path = os.path.join(base_dir, 'runs', 'detect', timestrap, img.name)
        if os.path.exists(res_path):
            print('有檢測結(jié)果吧')
            with open(res_path, 'rb') as f:
                data = f.read()
                result['msg'] = bytes.decode(base64.b64encode(data))
        else:
            result['msg'] = '有圖片上傳但是沒有檢測結(jié)果'
    else:
        result['msg'] = '沒有圖片上傳'
    return JsonResponse(result)

前端

<template>
  <div class="container">
    <!-- <div class="mysel" style="margin-bottom: 20px;">
      <el-select v-model="value" placeholder="請選擇檢測模型" >
      </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">
      點擊識別
    </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,
      // 后端傳過來的圖片的base64形式
      detect_picture: '',
      queryParams: {
        ipaddr: undefined,
        userName: undefined
      },
    };
  },
  computed: {
  },
  watch: {
    },
    activeId: {
  },
  mounted() {
  },
  created(){
    // this.visualize_data()
  },
  methods: {
    // 測試前后端是否連通的函數(shù)
  visualize_data() {
		  return request({
		    url: "/test_moudle/test", //get請求最后沒有'/'
		    method: "get",
		  }).then(response=>{
			  console.log('怎么可以這樣',response)
		  });
		},
    // 處理圖片預(yù)覽效果
    handlePreview(){},
    // 處理移除圖片的操作
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 點擊文件列表中已上傳的文件時的鉤子
    handlePictureCardPreview(file) {
      // 這個“file”里默認包含了這張圖片的所有信息：名字，url...
      console.log("打印下zi",file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    but_test(){
      console.log("這個函數(shù)是否執(zhí)行")
      this.uploadURL = process.env.VUE_APP_BASE_API+"/test_moudle/test/";
    },
    // 用這個函數(shù)去接收后端傳過來的圖片
    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>

寫了3個demo，前端沒變哈哈哈哈，變得只是后端怎么處理圖片，怎么傳給前端