vue实现标注软件的图像加载和显示

最新推荐文章于 2024-06-18 15:23:28 发布

Jumy_S

最新推荐文章于 2024-06-18 15:23:28 发布

阅读量228

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Jumy_S/article/details/133686936

版权

本文探讨如何利用Vue.js框架来实现一款图像标注软件，重点讲述图像的加载和显示功能。

摘要由CSDN通过智能技术生成

vue实现标注软件的图像加载和显示

<template>
  <!-- 主窗体 -->
 <div class="main">
    <!-- 快捷导航 -->
    <div class="shortcut">
      <div class="wrapper">
        <ul>
          <li><a href="#">主页面</a></li>
          <li><a href="#">返回</a></li>
        </ul>
      </div>
    </div>

    <!-- 头部区域 -->
    <div class="header wrapper">

    </div>

    <!-- 中间内容区域 -->
    <div class="container wrapper">
        <!-- 左侧区域 -->
        <div class="left">
            <!-- 左侧工具栏 -->
            <div class="lefttool">
              <ul>
                <li> 
                    <!-- 上传图像 -->
                    <el-upload
                      action="http://127.0.0.1:5000/uploadImgs"
                      method="post"
                      :show-file-list="false"
                      name = "image"
                      multiple
                      :on-success="onImagesUploadSuccess"
                      >
                        <el-button>上传图像</el-button>
                    </el-upload>

                </li>
                <li> 
                  <!-- 上传标签 -->
                  <el-upload
                      action="http://127.0.0.1:5000/uploadlabels"
                      method="post"
                      :show-file-list="false"
                      name = "label"
                      multiple
                    >
                      <el-button> 上传标签</el-button>
                  </el-upload>
                </li>
              </ul>
            </div>
            <!-- 图像列表显示 -->
            <el-table :data="imgNameList" height="650" style="width:100%" 	@row-click="imgSelected"	:row-class-name="tableRowClassName">
               <el-table-column prop="index" label="id" width="50px"></el-table-column>
               <el-table-column prop="imgName" label="图像名称" width="150px" ></el-table-column>
            </el-table>


        </div>


        <!-- 中部区域 -->
        <div class="middle">
           <!-- 绘图区域 -->
           <di