【前后端的那些事】15min快速实现图片上传，预览功能(ElementPlus+Springboot)

文章目录

    • Element Plus + SpringBoot实现图片上传，预览，删除
        • 效果展示
      • 1. 后端代码
        • 1.1 controller
        • 1.2 service
      • 2. 前端代码
        • 2.1 路由创建
        • 2.2 api接口
        • 2.2 文件创建
      • 3. 前端上传组件封装

前言：最近写项目，发现了一些很有意思的功能，想写文章，录视频把这些内容记录下。但这些功能太零碎，如果为每个功能都单独搭建一个项目，这明显不合适。于是我想，就搭建一个项目，把那些我想将的小功能全部整合到一起。实现 搭一次环境，处处使用。

本文主要实现以下功能

  1. 图片上传

环境搭建
文章链接

已录制视频
视频链接

仓库地址
https://github.com/xuhuafeifei/fgbg-font-and-back.git

Element Plus + SpringBoot实现图片上传，预览，删除

效果展示

  • 提交样式
    在这里插入图片描述

  • 放大预览

在这里插入图片描述

  • 成功提交后端
    在这里插入图片描述

  • 访问url

在这里插入图片描述

  • 后端存储
    在这里插入图片描述

  • 根据url下载/访问图片

在这里插入图片描述

1. 后端代码

1.1 controller
import com.fgbg.common.utils.R;
import com.fgbg.demo.service.FileService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.UUID;

@RestController
@RequestMapping("/common/file")
public class FileController {
    @Autowired
    @Qualifier("localFileService")
    private FileService fileService;

    /**
     * 上传接口
     */
    @RequestMapping("/upload")
    public R upload(@RequestParam("image") MultipartFile file) throws IOException {
        String url = fileService.uploadFile(file, UUID.randomUUID().toString().substring(0, 10)
                + "-" + file.getOriginalFilename());
        return R.ok().put("data", url);
    }

    /**
     * 下载接口
     */
    @RequestMapping("/download/{fileName}")
    public void download(@PathVariable("fileName") String fileName, HttpServletRequest request, HttpServletResponse response) {
        fileService.downloadFile(fileName, request, response);
    }

    /**
     * 删除接口
     */
    @RequestMapping("/delete")
    public R deleteFile(@RequestParam String fileName) {
        boolean flag = fileService.deleteFile(fileName);
        return R.ok().put("data", flag);
    }
}
1.2 service

tip: 文件上传存储有多种解决方案，比如minio，阿里云…

笔者考虑到编写容易程度与文章核心解决问题，采用了最原始的存储方法，即本地存储。以后端所在服务器为存储容器，将前端上传的图片以FileIO的形式进行存储。

考虑到有多种存储方式，读者可以实现FileService接口，自行编写impl类，以达到不同的文件存储的具体实现方式

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public interface FileService {
    /**
     * 上传图片, 返回url
     */
    String uploadFile(MultipartFile file, String fileName) throws IOException;

    /**
     * 下载图片
     */
    void downloadFile(String fileName, HttpServletRequest request, HttpServletResponse response);

    /**
     * 删除图片
     */
    boolean deleteFile(String fileName);
}

impl

import com.fgbg.demo.service.FileService;
import org.apache.commons.io.FileUtils;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.nio.file.Files;
import java.nio.file.Paths;

/**
 * 基于本地的文件管理服务
 */
@Service("localFileService")
public class LocalFileServiceImpl implements FileService {
    /**
     * 文件访问域名(请求下载的接口)
     */
    private static final String DOMAIN = "http://localhost:9005/api_demo/common/file/download/";

    /**
     * 文件物理存储位置
     */
    private static final String STORE_DIR = "E:\\B站视频创作\\前后端项目构建-小功能实现\\代码\\backend\\src\\main\\resources\\pict\\";

    /**
     * 上传图片, 返回url
     *
     * @param file
     * @param fileName
     */
    @Override
    public String uploadFile(MultipartFile file, String fileName) throws IOException {
        // 获取文件流
        InputStream is = file.getInputStream();
        // 在服务器中存储文件
        FileUtils.copyInputStreamToFile(is, new File(STORE_DIR + fileName));
        // 返回图片url
        String url = DOMAIN + fileName;
        System.out.println("文件url: " + url);
        return url;
    }

    /**
     * 下载图片
     *
     * @param fileName
     */
    @Override
    public void downloadFile(String fileName, HttpServletRequest request, HttpServletResponse response) {
        // 获取真实的文件路径
        String filePath = STORE_DIR + fileName;
        System.out.println("++++完整路径为："+filePath);

        try {
            // 下载文件
            // 设置响应头
            response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
            response.setHeader(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + fileName);

            // 读取文件内容并写入输出流
            Files.copy(Paths.get(filePath), response.getOutputStream());
            response.getOutputStream().flush();
        } catch (IOException e) {
            response.setStatus(404);
        }
    }

    /**
     * 删除图片
     *
     * @param fileName
     */
    @Override
    public boolean deleteFile(String fileName) {
        // 获取真实的文件路径
        String filePath = STORE_DIR + fileName;
        System.out.println("++++完整路径为："+filePath);

        File file = new File(filePath);
        return file.delete();
    }
}

2. 前端代码

2.1 路由创建

/src/router/modules/file.ts

const { VITE_HIDE_HOME } = import.meta.env;
const Layout = () => import("@/layout/index.vue");

export default {
  path: "/file",
  name: "file",
  component: Layout,
  redirect: "/pict",
  meta: {
    icon: "homeFilled",
    title: "文件",
    rank: 0
  },
  children: [
    {
      path: "/pict",
      name: "pict",
      component: () => import("@/views/file/pict.vue"),
      meta: {
        title: "图片",
        showLink: VITE_HIDE_HOME === "true" ? false : true
      }
    }
  ]
} as RouteConfigsTable;
2.2 api接口

tip:

  • 文件上传只能用post
  • 前端部分图片封装为FormData对象
  • 请求头标明"Content-Type": "multipart/form-data"
import { http } from "@/utils/http";
import { R, baseUrlApi } from "./utils";

/** upload batch */
export const uploadBatch = (data: FormData) => {
  return http.request<R<any>>("post", baseUrlApi("common/file/uploadList"), {
    data,
    headers: {
      "Content-Type": "multipart/form-data"
    }
  });
};

/** upload */
export const upload = (data: FormData) => {
  return http.request<R<any>>("post", baseUrlApi("common/file/upload"), {
    data,
    headers: {
      "Content-Type": "multipart/form-data"
    }
  });
};
2.2 文件创建

/src/views/file/pict.vue

tip:

  • 图片封装为FormData

  • formdata添加图片信息时，使用的是append()方法. append(name: string, value: string | Blob)

  • append的第一个参数，对应的是后端@RequestParam("xxx") MultipartFile file中xxx的值，本文中后端批量上传接口，xxx值为’imageList’

  • Element Plus上传图片，图片数据中都会有一个新的字段数据raw，这个数据我们就理解成文件本身。像后端提交数据提交的也是raw本身，而非其余额外数据

    在这里插入图片描述

  • append第二个参数，提交的是fileList中每个文件元素的raw属性s数据

<template>
  <el-upload
    v-model:file-list="fileList"
    list-type="picture-card"
    multiple
    :auto-upload="false"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
  <el-button @click="submit">提交</el-button>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { uploadBatch } from "/src/api/file.ts";
import type { UploadProps } from "element-plus";
import { ElMessage } from "element-plus";

const submit = () => {
  console.log(fileList.value);
  // 封装formData
  const data = new FormData();
  // forEach遍历的时fileList.value, 所有element不需要.value去除代理
  fileList.value.forEach(element => {
    data.append("imageList", element.raw);
  });
  uploadBatch(data).then(res => {
    console.log(res);
    if (res.code === 0) {
      ElMessage.success("上传成功");
    } else {
      ElMessage.error("上传失败: " + res.msg);
    }
  });
};

const fileList = ref();

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>

3. 前端上传组件封装

如果没有组件封装需求，那就不需要修改代码。
组件封装视频链接

tip: 提交逻辑交由父组件实现

child.vue

<template>
  <el-upload
    v-model:file-list="localFileList"
    list-type="picture-card"
    multiple
    :auto-upload="false"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";

// 定义数据
const props = defineProps({
  fileList: {
    type: Array,
    default: () => []
  }
});

// 将父组件的数据拆解为子组件数据
const localFileList = ref(props.fileList);

// 监听localFileList, 跟新父组件数据
watch(
  localFileList,
  newValue => {
    emits("update:fileList", newValue);
  },
  {
    deep: true
  }
);

// 定义组件事件, 跟新fileList
const emits = defineEmits(["update:fileList"]);

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>

父组件

<script setup lang="ts">
import Child from "./component/child.vue";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { uploadBatch } from "/src/api/file.ts";

const fileList = ref();

const submit = () => {
  console.log(fileList.value);
  // 封装formData
  const data = new FormData();
  // forEach遍历的时fileList.value, 所有element不需要.value去除代理
  fileList.value.forEach(element => {
    data.append("imageList", element.raw);
  });
  uploadBatch(data).then(res => {
    console.log(res);
    if (res.code === 0) {
      ElMessage.success("上传成功");
    } else {
      ElMessage.error("上传失败: " + res.msg);
    }
  });
};
</script>

<template>
  <Child v-model:fileList="fileList" />
  <el-button @click="submit">提交</el-button>
</template>

<style lang="scss" scoped></style>

效果
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/332757.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

node.js 实现文件上传 和图片映射 文件下载(multer)

node.js 实现文件上传 和图片映射 文件下载(multer)

Muter是一个node.js中间件。主要处理multupart/from-data类型的表单数据&#xff0c;常用于上传文件。在express.js应用中&#xff0c;multer使得上传文件变得更加简单。主要功能是将客户端上传的文件存储在服务器的本地文件系统中。它还添加了一个body对象以及file或files对象…
阅读更多...
qnx 上screen + egl + opengles 最简实例

qnx 上screen + egl + opengles 最简实例

文章目录 前言一、qnx 上的窗口系统——screen二、screen + egl + opengles 最简实例1.使用 addvariant 命令创建工程目录2. 添加源码文件3. common.mk 文件4. 编译与执行总结参考资料前言 本文主要介绍如何在QNX 系统上使用egl和opengles 控制GPU渲染一个三角形并显示到屏幕上…
阅读更多...
数据结构与算法-二叉树-从前序与中序遍历序列构造二叉树

数据结构与算法-二叉树-从前序与中序遍历序列构造二叉树

从前序与中序遍历序列构造二叉树 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 示例 1: 输入: preorder [3,9,20,15,7], inorder [9,3,15,20,7…
阅读更多...
Ubuntu18.04在线镜像仓库配置

Ubuntu18.04在线镜像仓库配置

在线镜像仓库 1、查操作系统版本 rootubuntu:~# lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 18.04.5 LTS Release: 18.04 Codename: bionic 2、原文件备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 3、查…
阅读更多...
深入理解Linux文件系统

深入理解Linux文件系统

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;晴る—ヨルシカ 0:20━━━━━━️&#x1f49f;──────── 4:30 &#x1f504; ◀️ ⏸ ▶️ ☰ &…
阅读更多...
宋仕强论道之华强北的领军企业（四十六）

宋仕强论道之华强北的领军企业（四十六）

华强北曾经的3发展是因为领军企业的带动而蓬勃发展&#xff0c;当年的华强集团、赛格集团、桑达集团和华发集团等是其中的代表&#xff0c;但现在他们失去了曾经的带头大哥的地位。其他的例子&#xff0c;如腾讯对于深圳市南山区科技园的带动&#xff0c;华为对龙岗坂田雪象岗头…
阅读更多...
MySQL面试题 | 16.精选MySQL面试题

MySQL面试题 | 16.精选MySQL面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
Leetcode2207. 字符串中最多数目的子字符串

Leetcode2207. 字符串中最多数目的子字符串

Every day a Leetcode 题目来源&#xff1a;2207. 字符串中最多数目的子字符串 解法1&#xff1a;贪心 一次遍历 设 pattern 的第一个字符为 x&#xff0c;第二个字符为 y。 根据题意&#xff0c;x 插入的位置越靠左&#xff0c;答案的个数越多&#xff1b;y 插入的位置越…
阅读更多...
C#： form 窗体的各种操作

C#： form 窗体的各种操作

说明&#xff1a;记录 C# form 窗体的各种操作 1. C# form 窗体居中显示 // 获取屏幕的宽度和高度 int screenWidth Screen.PrimaryScreen.Bounds.Width; int screenHeight Screen.PrimaryScreen.Bounds.Height;// 设置窗体的位置 this.StartPosition FormStartPosition.M…
阅读更多...
【Android】自定义View onDraw()方法会调用两次

【Android】自定义View onDraw()方法会调用两次

问题 自定义了View后&#xff0c;在构造函数中设置画笔颜色&#xff0c;发现它没起效&#xff0c;但是在onDraw()里设置颜色就会起效&#xff0c;出问题的代码如下&#xff1a; public RoundSeekbarView(Context context, Nullable AttributeSet attrs) {super(context, attrs…
阅读更多...
Discuz论坛网站登录账号操作慢，必须强制刷新才会显示登录怎么办？

Discuz论坛网站登录账号操作慢，必须强制刷新才会显示登录怎么办？

飞飞发现在登录服务器大本营账号时&#xff0c;输入账号密码登录后还是显示的登录框&#xff0c;强制刷新后才知道已经登录了&#xff0c;每次都要刷新才能正常显示&#xff0c;非常影响用户体验&#xff0c;于是在网上找了类似的问题故障解决方法&#xff0c;目前问题已经解决…
阅读更多...
vue安装组件报错In most cases you are behind a proxy or have bad network settings.

vue安装组件报错In most cases you are behind a proxy or have bad network settings.

解决办法 步骤1 npm config get proxy npm config get https-proxy 如果2个返回值不为null&#xff0c;请执行下面代码&#xff0c;重置为null。否则&#xff0c;直接执行步骤2。 npm config set proxy null npm config set https-proxy null 步骤2 npm config set regis…
阅读更多...
MSVS C# Matlab的混合编程系列2 - 构建一个复杂（含多个M文件）的动态库：

MSVS C# Matlab的混合编程系列2 - 构建一个复杂（含多个M文件）的动态库：

前言： 本节我们尝试将一个有很多函数和文件的Matlab算法文件集成到C#的项目里面。 本文缩语： MT = Matlab 问题提出： 1 我们有一个比较复杂的Matlab文件： 这个MATLAB的算法,写了很多的算法函数在其他的M文件里面,这样,前面博客的方法就不够用了。会报错： 解决办法如下…
阅读更多...
ceph数据分布式存储

ceph数据分布式存储

单机存储的问题 存储处理能力不足 传统的IDE的IO值是100次/秒&#xff0c;SATA固态磁盘500次/秒&#xff0c;固态硬盘达到2000-4000次/秒。即使磁盘的IO能力再大数十倍&#xff0c;也不够抗住网站访问高峰期数十万、数百万甚至上亿用户的同时访问&#xff0c;这同时还要受到主机…
阅读更多...
《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(10)-Fiddler如何设置捕获Firefox浏览器的Https会话

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(10)-Fiddler如何设置捕获Firefox浏览器的Https会话

1.简介 经过上一篇对Fiddler的配置后&#xff0c;绝大多数的Https的会话&#xff0c;我们可以成功捕获抓取到&#xff0c;但是有些版本的Firefox浏览器仍然是捕获不到其的Https会话&#xff0c;需要我们更进一步的配置才能捕获到会话进行抓包。 2.宏哥环境 1.宏哥的环境是Wi…
阅读更多...
[NSSRound#16 Basic]RCE但是没有完全RCE

[NSSRound#16 Basic]RCE但是没有完全RCE

题目代码&#xff1a; <?php error_reporting(0); highlight_file(__file__); include(level2.php); if (isset($_GET[md5_1]) && isset($_GET[md5_2])) {if ((string)$_GET[md5_1] ! (string)$_GET[md5_2] && md5($_GET[md5_1]) md5($_GET[md5_2])) {i…
阅读更多...
山西电力市场日前价格预测【2024-01-20】

山西电力市场日前价格预测【2024-01-20】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2024-01-20&#xff09;山西电力市场全天平均日前电价为304.16元/MWh。其中&#xff0c;最高日前电价为486.22元/MWh&#xff0c;预计出现在18:15。最低日前电价为87.43元/MWh&#xff0c;预计出…
阅读更多...
Docker容器添加映射端口

Docker容器添加映射端口

方式一 简单粗暴&#xff08;需要等一段时间&#xff09; 直接给现在容器停了&#xff08;当然你要不想停也可以&#xff0c;只是打包会慢一点&#xff0c;当然我是没出意外&#xff0c;如果你怕出现特殊情况&#xff0c;那就先把容器停了&#xff09;&#xff0c;然后把这个容…
阅读更多...
Java-初识正则表达式 以及 练习

Java-初识正则表达式 以及 练习

目录 什么是正则表达式&#xff1f; 1. 正则表达式---字符类&#xff08;一个大括号匹配一个字符&#xff09;&#xff1a; 2. 正则表达式---预字符类&#xff08;也是匹配一个字符&#xff09;&#xff1a; 正则表达式---数量词 &#xff08;可以匹配多个字符&#xff09;…
阅读更多...
HarmonyOS-$$语法：内置组件双向同步

HarmonyOS-$$语法：内置组件双向同步

$$语法&#xff1a;内置组件双向同步 $$运算符为系统内置组件提供TS变量的引用&#xff0c;使得TS变量和系统内置组件的内部状态保持同步。 内部状态具体指什么取决于组件。例如&#xff0c;Refresh组件的refreshing参数。 使用规则 当前$$支持基础类型变量&#xff0c;以及…
阅读更多...
最新文章

Copyright @ 2022~2023