表格中附件的上传、显示以及文件下载#Vue3#后端接口数据

已于 2024-06-05 11:01:08 修改
阅读量456 收藏 3
点赞数 3
文章标签： vue.js 开发语言
于 2024-05-31 13:41:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45356258/article/details/139350084
版权

表格中附件的上传及显示#Vue3#后端接口数据

一、图片上传并显示在表格中实现效果：
在这里插入图片描述

表格中上传附件

代码：

<!-- 文件的上传及显示 -->
<template>
  <!-- 演示地址 -->
  <div class="dem-add">
    <!-- Search start -->
    <div class="dem-title">
      <p>演示地址</p>
      <el-input
        class="query-input"
        v-model="tableForm.demoDevice"
        placeholder="搜索"
        @keyup.enter="handleQueryName"
      >
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" :icon="Plus" circle @click="handleAdd" />
    </div>
    <!-- Search end -->
    <!-- Table start -->
    <div class="bs-page-table">
      <el-table :data="tableData" ref="multipleTableRef">
        <el-table-column prop="sort" label="排序" width="60" />
        <el-table-column prop="demoDevice" label="演示端" width="150" />
        <el-table-column prop="address" label="地址" width="180" />
        <el-table-column prop="description" label="特殊说明" width="180" />
        <el-table-column prop="fileIds" label="附加" width="100">
          <template #default="scope">
            <img
              width="80px"
              height="80px"
              :src="`http://192.168.1.214:5050${scope.row.files[0].filePath}`"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button
              type="danger"
              @click="handleRowDel(scope.$index)"
              :icon="Delete"
              circle
            />
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="dialogFormVisible" title="新增" width="500">
        <el-form :model="tableForm">
          <el-form-item label="排序" :label-width="80">
            <el-input v-model="tableForm.sort" autocomplete="off" />
          </el-form-item>
          <el-form-item label="演示端" :label-width="80">
            <el-input v-model="tableForm.demoDevice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="地址" :label-width="80">
            <el-input v-model="tableForm.address" autocomplete="off" />
          </el-form-item>
          <el-form-item label="特殊说明" :label-width="80">
            <el-input v-model="tableForm.description" autocomplete="off" />
          </el-form-item>
          <el-form-item label="附加" :label-width="80">
            <el-upload
              multiple
              class="upload-demo"
              action=""
              :http-request="uploadFile"
              list-type="picture"
            >
              <el-button type="primary">上传文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false"> 取消 </el-button>
            <el-button type="primary" @click="dialogConfirm"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!-- Table end -->
  </div>
</template>

<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { ref, onMounted, toRaw } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { Delete } from "@element-plus/icons-vue";

const router = useRouter();
console.log(router.currentRoute.value.path); //当前路由路径
sessionStorage.setItem("path", router.currentRoute.value.path);
// 演示地址
// 定义表格
const tableData = ref<any>([]);
// 定义弹窗表单
let tableForm = ref({
  sort: "",
  demoDevice: "",
  address: "",
  description: "",
  fileIds: <any>[],
  file: "",
});
// 默认对话框关闭状态
const dialogFormVisible = ref(false);
// 调用接口数据在表单显示
const port = async () => {
  await axios
    .post("http://192.168.1.214:5050/api/Project/DemoGetTable", {
      pageIndex: 1,
      pageSize: 100,
      projectId: "1",
    })
    .then((response) => {
      // 将找到的数据返回给表单显示
      tableData.value = response.data.data.list;
    })
    .catch((error) => {
      console.error(error);
    });
};
// 挂载
onMounted(() => {
  port();
});
// 搜索（通过name值查找）
const handleQueryName = () => {
  console.log("搜索");
};
// 新增
const handleAdd = async () => {
  // 打开新增对话框
  dialogFormVisible.value = true;
  // 设置空的绑定对象
  tableForm.value = {
    demoDevice: "",
    address: "",
    description: "",
    sort: "",
    fileIds: [],
    file: "",
  };
};
// 上传文件
const uploadFile = async (val: any) => {
  tableForm.value.file = val.file;
  // 数据交互
  let formdata = new FormData();
  formdata.append("File", tableForm.value.file);
  axios
    // 上传文件接口
    .post("http://192.168.1.214:5050/api/File/UploadFile", formdata, {
      headers: { "Content-Type": "multipart/form-data" },
    })
    .then((res) => {
      // 将文件id值传给tableForm的属性fileIds
      tableForm.value.fileIds.push(res.data.data.id);
      const newobj = Object.assign({ projectId: "1" }, toRaw(tableForm.value));
      axios
        // 添加演示地址接口
        .post("http://192.168.1.214:5050/api/Project/DemoAdd", newobj);
    });
};
// 删除
const handleRowDel = async (index: any) => {
  // 找到要删除的接口中对应的对象
  await axios.post("http://192.168.1.214:5050/api/Project/DemoDel", {
    // 获取到当前索引index下的id值，toRaw()方法获取原始对象
    id: toRaw(tableData.value[index]).id,
  });
  // 从index位置开始，删除一行即可
  tableData.value.splice(index, 1);
};
// 确认表单弹窗
const dialogConfirm = () => {
  dialogFormVisible.value = false;
  port();
};
</script>

<style scoped lang="scss">
// 演示地址
.dem-add {
  width: 800px;
  margin: 20px 50px;
  background-color: rgba(255, 255, 255, 0.333);
  box-shadow: 0 8px 16px #0005;
  border-radius: 16px;
  overflow: hidden;
  // 标签
  .dem-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(207, 204, 204, 0.267);
    padding: 0 20px;
    p {
      float: left;
      width: 150px;
      color: #000;
    }
    // 搜索
    ::v-deep .el-input__wrapper {
      border-radius: 100px;
    }
    .query-input {
      width: 240px;
      height: 35px;
      margin: 10px auto;
      margin-left: 330px;
      background-color: transparent;
      transition: 0.2s;
    }
    ::v-deep .el-input__wrapper:hover {
      background-color: #fff8;
      box-shadow: 0 5px 40px #0002;
    }
    // 增加按钮
    .el-button {
      float: left;
      margin-top: 3px;
      margin-left: 10px;
    }
  }
  // 表格
  .bs-page-table {
    .el-table {
      width: 100%;
      border: 1px solid rgb(219, 219, 219);
      padding: 10px;
      .el-table-column {
        border-collapse: collapse;
        text-align: left;
      }
    }
  }
  // 分页
  .demo-pagination-block {
    padding: 9px 20px;
  }
}
</style>

二、文件上传并下载文件效果：
在这里插入图片描述

表格中附件的上传并下载

代码： （这里受到这篇文章的启发：HTML点击按钮button跳转页面的几种实现方法）

<!-- 文件的上传及显示 -->
<template>
  <!-- 演示地址 -->
  <div class="dem-add">
    <!-- Search start -->
    <div class="dem-title">
      <p>演示地址</p>
      <el-input
        class="query-input"
        v-model="tableForm.demoDevice"
        placeholder="搜索"
        @keyup.enter="handleQueryName"
      >
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" :icon="Plus" circle @click="handleAdd" />
    </div>
    <!-- Search end -->
    <!-- Table start -->
    <div class="bs-page-table">
      <el-table :data="tableData" ref="multipleTableRef">
        <el-table-column prop="sort" label="排序" width="60" />
        <el-table-column prop="demoDevice" label="演示端" width="150" />
        <el-table-column prop="address" label="地址" width="180" />
        <el-table-column prop="description" label="特殊说明" width="180" />
        <el-table-column prop="fileIds" label="附加" width="100">
          <template #default="scope">
            <a
              :href="`http://192.168.1.214:5050${scope.row.files[0].filePath}`"
              style="color: blue; text-decoration: none"
              target="_blank"
            >
              <el-button
                circle
                size="default"
                type="default"
                :icon="FolderChecked"
              ></el-button>
            </a>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button
              type="danger"
              @click="handleRowDel(scope.$index)"
              :icon="Delete"
              circle
            />
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="dialogFormVisible" title="新增" width="500">
        <el-form :model="tableForm">
          <el-form-item label="排序" :label-width="80">
            <el-input v-model="tableForm.sort" autocomplete="off" />
          </el-form-item>
          <el-form-item label="演示端" :label-width="80">
            <el-input v-model="tableForm.demoDevice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="地址" :label-width="80">
            <el-input v-model="tableForm.address" autocomplete="off" />
          </el-form-item>
          <el-form-item label="特殊说明" :label-width="80">
            <el-input v-model="tableForm.description" autocomplete="off" />
          </el-form-item>
          <el-form-item label="附加" :label-width="80">
            <el-upload
              multiple
              class="upload-demo"
              action=""
              :http-request="uploadFile"
              list-type="picture"
            >
              <el-button type="primary">上传文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false"> 取消 </el-button>
            <el-button type="primary" @click="dialogConfirm"> 确认 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!-- Table end -->
  </div>
</template>

<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { ref, onMounted, toRaw } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { Delete } from "@element-plus/icons-vue";
import { FolderChecked } from "@element-plus/icons-vue";

const router = useRouter();
console.log(router.currentRoute.value.path); //当前路由路径
sessionStorage.setItem("path", router.currentRoute.value.path);
// 演示地址
// 定义表格
const tableData = ref<any>([]);
// 定义弹窗表单
let tableForm = ref({
  sort: "",
  demoDevice: "",
  address: "",
  description: "",
  fileIds: <any>[],
  file: "",
});
// 默认对话框关闭状态
const dialogFormVisible = ref(false);
// 调用接口数据在表单显示
const port = async () => {
  await axios
    .post("http://192.168.1.214:5050/api/Project/DemoGetTable", {
      pageIndex: 1,
      pageSize: 100,
      projectId: "1",
    })
    .then((response) => {
      // 将找到的数据返回给表单显示
      tableData.value = response.data.data.list;
      console.log(tableData.value);
    })
    .catch((error) => {
      console.error(error);
    });
};
// 挂载
onMounted(() => {
  port();
});
// 搜索（通过name值查找）
const handleQueryName = () => {
  console.log("搜索");
};
// 新增
const handleAdd = async () => {
  // 打开新增对话框
  dialogFormVisible.value = true;
  // 设置空的绑定对象
  tableForm.value = {
    demoDevice: "",
    address: "",
    description: "",
    sort: "",
    fileIds: [],
    file: "",
  };
};
// 上传文件
const uploadFile = async (val: any) => {
  tableForm.value.file = val.file;
  // 数据交互
  let formdata = new FormData();
  formdata.append("File", tableForm.value.file);
  axios
    // 上传文件接口
    .post("http://192.168.1.214:5050/api/File/UploadFile", formdata, {
      headers: { "Content-Type": "multipart/form-data" },
    })
    .then((res) => {
      // 将文件id值传给tableForm的属性fileIds
      tableForm.value.fileIds.push(res.data.data.id);
      const newobj = Object.assign({ projectId: "1" }, toRaw(tableForm.value));
      axios
        // 添加演示地址接口
        .post("http://192.168.1.214:5050/api/Project/DemoAdd", newobj);
    });
};
// 删除
const handleRowDel = async (index: any) => {
  // 找到要删除的接口中对应的对象
  await axios.post("http://192.168.1.214:5050/api/Project/DemoDel", {
    // 获取到当前索引index下的id值，toRaw()方法获取原始对象
    id: toRaw(tableData.value[index]).id,
  });
  // 从index位置开始，删除一行即可
  tableData.value.splice(index, 1);
};
// 确认表单弹窗
const dialogConfirm = () => {
  dialogFormVisible.value = false;
  port();
};
</script>

<style scoped lang="scss">
// 演示地址
.dem-add {
  width: 800px;
  margin: 20px 50px;
  background-color: rgba(255, 255, 255, 0.333);
  box-shadow: 0 8px 16px #0005;
  border-radius: 16px;
  overflow: hidden;
  // 标签
  .dem-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(207, 204, 204, 0.267);
    padding: 0 20px;
    p {
      float: left;
      width: 150px;
      color: #000;
    }
    // 搜索
    ::v-deep .el-input__wrapper {
      border-radius: 100px;
    }
    .query-input {
      width: 240px;
      height: 35px;
      margin: 10px auto;
      margin-left: 330px;
      background-color: transparent;
      transition: 0.2s;
    }
    ::v-deep .el-input__wrapper:hover {
      background-color: #fff8;
      box-shadow: 0 5px 40px #0002;
    }
    // 增加按钮
    .el-button {
      float: left;
      margin-top: 3px;
      margin-left: 10px;
    }
  }
  // 表格
  .bs-page-table {
    .el-table {
      width: 100%;
      border: 1px solid rgb(219, 219, 219);
      padding: 10px;
      .el-table-column {
        border-collapse: collapse;
        text-align: left;
      }
    }
  }
  // 分页
  .demo-pagination-block {
    padding: 9px 20px;
  }
}
</style>

#c，终于解决了，回家种地~

Alexeigirl
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue上传附件
qq_44783880的博客
07-27 1257
流程点击上传到–》文件服务器upload—》调用saveFile–》调用FileLists。
spring+element+vue附件上传、下载及在线预览
01-14
本文将深入探讨如何在基于Spring Boot后端和Vue.js前端的环境中，利用Element UI组件库实现附件的上传、下载以及在线预览功能。Element UI是基于Vue.js的组件库，提供了丰富的UI组件，对于构建企业级应用非常方便。 ...
VUE 上传多个附件，显示文件列表，可删除
热门推荐
happygirlnan的专栏
07-11 1万+
&lt;template&gt; &lt;div class="row"&gt; &lt;form action="/" method="post" id="uploadForm" enctype="multipart/form-data"&gt; &lt;div class=&quo
Vue实现附件上传功能
10-15
主要为大家详细介绍了Vue实现附件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue附件上传和展示
qq_42572245的博客
08-02 2766
jsp <el-table-column align="center" label="附件列表" width="200px"> <template slot-scope="scope"> <el-upload class="upload-demo" ...
vue3 文件上传（ElementPlus Upload文件列表点击可下载）
m0_66921738的博客
12-25 898
【代码】vue3 文件上传（文件列表点击可下载）
史上最全springboot+vue3+element-plus代码实现web登录页面（附件有代码）
最新发布
04-15
在登录页面实现中，Spring Boot主要负责后端逻辑，包括用户验证、API接口设计以及数据库操作。通过Spring Security，可以轻松地添加安全控制，如登录认证、权限管理等。 2. **Vue.js**： Vue.js是一款轻量级的前端...
vue-vben-admin:基于Vite2，vue3.0，ant-design-vue 2.x，打字稿，vuex，vue-router的vue3样式管理员，正在努力进行更新。
05-11
使用最新的vue3 ， vite2 ， TypeScript和其他主流技术开发，开箱即用的中端和后端前端解决方案也可用于学习参考。 特征 最新技术发展水平：使用诸如Vue3 / vite2之类的前端前端技术开发 TypeScript ：应用程序级...
Vue结合后台导入导出Excel问题详解
12-11
- Blob是浏览器中用于表示二进制数据的接口，可以用来存储各种非结构化的数据，如图片、音频或在这种情况下，Excel文件。 4. **下载文件**： - 前端接收到Blob后，可以创建一个URL对象`URL.createObjectURL(blob)...
多附件上传效果jsshangchuang
03-23
多附件上传效果js多附件上传效果js多附件上传效果js
element上传图片，上传文件，以及富文本封装
07-26
在"element上传图片，上传文件，以及富文本封装"这个主题中，我们将深入探讨 Element UI 如何帮助开发者实现图片上传、文件上传以及富文本编辑功能。 1. **Element UI 的图片上传组件**： - `el-upload`是 Element...
vue3-ElementPlus上传&下载文件【代码】
hello，word！
08-29 1510
/fileUpload换成你自己接口。// 设置上传的请求头部。// 上传的文件列表。
vue 批量下载文件，不走后端接口的方法
Z1366566161664的博客
12-08 804
vue 批量下载文件，不走后端接口的方法
如何在Vue3 + js项目（脚手架）中使用（下载安装及运行）element-plus以及解决使用过程中遇到的问题
黛琳ghz的博客，期待你的关注。
01-15 1万+
在目前 Vue.js 盛行的前端开发时代，一个较为稳定、可持续更新、具有强大团队背景的 UI 前端 PC 框架——ElementUI（饿了么UI）框架应运而生。它带给我们的不仅仅是柔美、华丽、实用的控件，更多的是那种轻松上手、简单快捷的引用组件方式，以及它开放式的、目录明确的帮助文档。
Vue3：将表格数据下载为excel文件
Junehhhhh的博客
10-26 2815
Vue3：将表格数据下载为excel文件
vue el-table表格中每行上传文件（上传简历）操作
Silence-Lee的博客
11-28 1491
3、注意点 1、通过scope把上传的文件和表格中的行一一对应 2、上传后要把返回的数据push到表格数组中，删除后要把表格数组中的数据删除
功能：Vue附件上传：请求参数为二进制文件流数组：[file, file]
qq_43548684的博客
02-07 4851
能想得到的，就能实现的了~~
vue导入excel文件后端接口
06-08
在Vue组件中添加一个上传组件，用于选择Excel文件并上传到后端： ```html ``` 3. 处理上传事件 在Vue组件中添加处理上传事件的方法，该方法将读取Excel文件内容并将其发送到后端： ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值