yolov8 目标检测与跟踪-CFANZ编程社区

前言

上节回顾

上一小节中，我们添加了Vue-router的路有数据，这些数据都将是后续实战课程中的真实路由数据了。同时引入了ElementUI的el-menu做为左侧菜单的组件，但本专栏的特点就是遇到第三方功能和组件，自己尽量也要实现一遍，所以，在文章末尾又自己实现了一个tg-menu的组件。如果还不是很明白上下文的同学，可以回过头去看上一节的内容：使用Vue+Vue-router+el-menu实现菜单功能实战

本节介绍

本小节已经是专栏的第11篇博客了，这一节本来是准备开始做图书信息上传的，但考虑到图书信息上传中，有个图片上传的功能点，需要单独抽出一节来说。所以，这一节我们主要是围绕着Vue项目中，通过FormData + axios来实现单个图片上传的功能。

1. 引入 uploadFile 上传方法

2. 添加 uploadFile 实现代码

一、DOM内容的添加

1. 上传按钮和图片预备容器

在真实的项目中，用户点击的必定不是那个比较丑陋的input file组件，而是提供一个对用户非常友好的上传按钮。然后再放置一个DIV元素，用来预备存放上传成功后的图片，以达到预览的效果。

本小节暂时不用真实的业务组件来开发，先做一个小例子，一旦做成了，下一节图书信息上传就可以直接使用了。打开 /views/HelloWorld.vue 文件，书写以下DOM代码：

<el-button @click="uploadImage">上传图片</el-button>
    <p>展示图片：<p>
    <div style="width: 300px;height: 300px;border: 1px solid #CCC;">
      <img :src="upImage" v-if="upImage" style="width: 300px;height: 300px;" />
    </div>

    <input ref="imgFile" type="file" 
      name="file" accept="image/png,image/gif,image/jpeg,image/jpg" 
      @change="go2UploadImg($event)" style="display: none;">

2. DOM内容说明

3. 数据依赖的添加

新学习Vue的小伙伴可能还不太习惯，什么data数据，什么数据依赖，什么双向绑定，就不能说人话吗？的确如此，越接触破词越多，总是有那么多人喜欢造词。

好吧，说远了，我们上面说到img元素在还没有赋值的时候，会是叉叉，很不友好。所以添加了v-if="upImage"的判断。这里的upImage就是依赖于数据渲染的变量，而说到数据依赖，要想到Vue组件中下面这处代码，data函数中的数据就是所谓的数据依赖

二、上传事件说明

1. 上传事件准备

图片上传是一种行为，是一系列事件。而我们上面说，要通过点击“上传图片”按钮，去触发type="file"的原生组件，而原生组件被触发上传的重点在于change事件，这里注意，click事件只是去触发选择，说白了就是通过代码悄悄的触碰一下上传组件，代码如下

methods: {
    uploadImage() {
      this.$refs.imgFile.click();
    },
    go2UploadImg(e) {
      const file = e.target.files[0];
      const formData = new FormData();
      formData.append("file", file);

      uploadFile(formData).then((res) => {
        this.upImage = res.data;
      }).catch(() => {
        console.log('图片上传异常，请联系技术人员');
      })
    }
  }

2. 上传事件说明

uploadImage方法中，我们采用refs的方式获取type="file"组件，并且使用click的方式，触发组件的选择功能；

三、axios上传零件

1. 引入 uploadFile 上传方法

在/views/HelloWorld.vue 文件中，引入uploadFile方法，用于业务组件中上传调用，代码如下：

import { uploadFile } from '@/api/uploadImage.js';

2. 添加 uploadFile 实现代码

新建 /src/api/uploadImage.js文件，这里是 uploadFile 方法的具体实现，而刚才HelloWorld.vue中是业务组件的引用，这里要区分开，代码如下：

import request from '../utils/httpRequire.js';
import { URLS } from '../config/httpUrl.js';

// 上传图片
export function uploadFile(data) {
    return request({
        url: URLS.upFile,
        method: 'post',
        data,
    });
}

3. 添加url管理

打开 /src/config/httpUrl.js 文件，添加新的上传接口url即可，代码如下：

import { HPPT_IP } from "./httpIp";

export const URLS = {
  testPost: HPPT_IP + '/admin/book',    // post测试路径
  testGet: HPPT_IP + '/admin/book',     // post测试路径
  login: HPPT_IP + '/auth/login',       // 登录接口
  logout: HPPT_IP + '/auth/logout',     // 登出接口

  upFile: HPPT_IP + '/upload/image',     // 上传图片
}