YOLOv5+Flask+Vue实现图片检测_yolov5 本地图片检测

检测效果图

实现过程

1.前端获取

<el-card>
  <el-upload
    ref="uploadRef"
    class="upload-demo"
    action="#"
    :auto-upload="false"
  >
    <template #trigger>
      <el-button type="primary">选择文件</el-button>
    </template>
  </el-upload>
  <div class="main-card">
    <div class="sourceImage">
      <img v-if="imgUrl" :src="imgUrl" alt="" />
    </div>
    <div class="sourceImage">
      <!-- <template #file="{file}">
          <img :src="file.url" alt="">
        </template> -->
      <img v-if="resultUrl" :src="resultUrl" alt="" />
    </div>
  </div>
  <el-button type="primary" @click="getData()">检测</el-button>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="age" label="Age" width="180" />
  </el-table>

  <el-upload
    action="#"
    list-type="picture-card"
    :auto-upload="false"
    :on-change=&#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32