前端效果图

1 前端代码

<template><div><!-- 页面标题 --><h1 class="page-title">图片上传演示</h1><div class="upload-container"><!-- 使用 van-uploader 组件进行文件上传，v-model 绑定 fileList 数据，支持多选文件，afterRead 属性指定读取文件后的回调函数 --><van-uploader v-model="fileList" multiple :after-read="afterRead" /></div><button class="submit-button" @click="submitUpload">提交上传</button></div></template><script>
import axios from 'axios'
export default {data () {return {// 存储上传文件列表fileList: []}},methods: {afterRead (file) {// 此时可以自行将文件上传至服务器// 设置文件状态为上传中，并添加提示信息file.status = 'uploading'file.message = '上传中...'const fd = new FormData()// 将文件添加到 FormData 对象中，准备上传fd.append('file', file.file)axios.post('http://localhost:8081/api/upload', fd, {headers: {// 设置请求头为 multipart/form-data，用于文件上传'Content-Type': 'multipart/form-data'}}).then((res) => {console.log(res.data.code)// 判断服务器返回的状态码，如果为 200 表示上传成功if (res.data.code === 200) {file.status = 'done'file.message = '上传成功'file.content = res.data.data} else {file.status = 'failed'file.message = '上传失败'}}).catch((error) => {console.error(error)})},submitUpload () {// 遍历数组返回新数组const imgs = this.fileList.map(item => item.content)// 可以在这里添加提交上传的逻辑，比如确认所有文件上传状态等axios.post('http://localhost:8081/api/submit', JSON.stringify({ imgs }),{headers: {'Content-Type': 'application/json'}}).then((res) => {console.log(res.data)}).catch((error) => {console.error(error)})}}
}
</script><style scoped lang="less">h1 {text-align: center;}.page-title {font-size: 24px;font-weight: bold;color: #333;margin-bottom: 20px;}.upload-container {border: 2px dashed #999;padding: 20px;display: flex;flex-direction: column;align-items: center;}.submit-button {margin-top: 20px;padding: 10px 20px;background-color: #007bff;color: #fff;border: none;border-radius: 5px;cursor: pointer;}</style>

这是基于vue脚手架开发的，用于将本地的图片上传至服务器，并在上传过程中展示预览图。

注意：van-uploader标签是vant的一个组件，不会使用可以参考下列链接：vant

2 后端代码

@RestController
@CrossOrigin("*")
@RequestMapping("/api")
public class FileController {@PostMapping("/upload")public Result upload(MultipartFile  file){//file是前端传给后端的文件，文件可以保存到阿里云的oss、linux文件夹等都可以，这里由你们自己实现...,最终会得到一个图片url// 假设图片保存的地址String url="https://img2.baidu.com/it/u=446981511,947966320&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1727197200&t=3fc1e64aa5ec768a5bf721d5f131d60f";return Result.success(url);}@PostMapping("/submit")public Result add(@RequestBody ImagesDTO images) throws Exception{for (String img : images.getImgs()) {System.out.println(img);}return Result.success();}}

3 实现思路

步骤一：点击下方按钮

步骤二：选择图片，选中图片后，前端就会调用methods中afterRead（file）函数，最终将图片文件传给http://localhost:8081/api/upload后端接口，后端将图片存储，并返回图片的存储地址给前端。

 步骤三：前端会判断后端的响应，对不同响应做出不同处理，如果成功的话，前端可以拿到图片的存储地址，并将本张图片的后端地址，存储到本地。

res.data.data是图片后端地址

 所有的图片信息会存储在下列数组中，包括图片后端地址。

数组格式如下：

步骤四：点击提交上传后，会遍历flieList数组，将各元素的content（图片地址）的拿出，创建新的数组，将数组传给后端接口。

后端收到前端的请求