前端效果图
图片上传演示
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（图片地址）的拿出，创建新的数组，将数组传给后端接口。
后端收到前端的请求
