用户在前端上传不等数量图片,现在需要把其相对/绝对路径存进数据库中,方便后期使用和页面回显.
后端存储pic字段是字符串 用于 用","逗号 拼接 多个图片 url
1.html代码:
<el-form ref="tableData71" :model="tableData71"> <el-form-item label="项目图片" prop="pic"> <el-upload ref="upload" action="#" :http-request="uploadFileceshi" :before-upload="beforeUploadceshi" :auto-upload="true" :limit="10" :on-exceed="handleExceedceshi" v-model="tableData71.pic"> <el-button size="small" type="primary"> 新增项目数据图片 <i class="el-icon-upload el-icon--right"></i> </el-button> <template slot-scope="scope"> <el-link>{{ scope.row.pic}}</el-link> </template> </el-upload> <el-button @click="handlePreviewceshi" title="预览图片">预览图片</el-button> <el-dialog title="图片预览" :visible.sync="previewDialogVisibleceshi" width="80%"> <el-carousel type="card" :interval="5000"> <el-carousel-item v-for="(item, index) in previewImageListceshi" :key="index"> <el-image :src="item.src" style="width: 100%;height: 100%;" /> </el-carousel-item> </el-carousel> </el-dialog> </el-form-item> </el-form>前端走马灯浏览已经上传的图片
前端JS方法,一共四个,
1.上传前校验方法
2.上传方法
3.上传数量限制方法
4.浏览/回显方法
1.上传前校验方法,比较经典
beforeUploadceshi(fileObj) { // const isJPG = fileObj.type === 'image/jpeg' || fileObj.type === 'image/png'; // const isLt20M = fileObj.size / 1024 / 1024 < 20; // // if (!isJPG) { // this.$message.error('上传附件只能是 JPG/PNG 格式!'); // return Promise.reject(false); // } // if (!isLt20M) { // this.$message.error('上传附件大小不能超过 20MB!'); // return Promise.reject(false); // } // if (!this.attachFilesceshi) { // this.attachFilesceshi = []; // 如果数组不存在，先创建 // } this.attachFilesceshi.push(fileObj); console.log(this.attachFilesceshi+" this.attachFilesceshi") return fileObj; },2.上传方法,重中之重,参数和返回值自己要明确自己要什么,再根据实际情况修改逻辑,方法走不通多添加log 前台打印找问题
//上传图片方法,需要改一下字段名字 uploadFileceshi() { if (!this.attachFilesceshi || this.attachFilesceshi.length === 0) { this.message.warning("请选择文件!"); return; } let formData = new FormData(); for (let i = 0; i < this.attachFilesceshi.length; i++) { formData.append("file", this.attachFilesceshi[i]); } console.log(formData); // 调试用，确认 formData 中包含多个键值对 uploadAttachs(formData).then((res) => { console.log(`服务端返回数据：${res}`); let urls = res.split(","); // 将返回的字符串用逗号分隔开，得到多个 URL const lastUrlIndex = urls.length - 1; // 记录最后一个 URL 的下标 let separator = ''; // 初始化一个分隔符 if (this.tableData71.pic) { // 判断变量中是否已经有了 URL separator = ','; // 如果有，则将分隔符设置为逗号 } for (let i = 0; i < urls.length; i++) { let url = urls[i].trim(); // 去除 URL 中的空格 this.tableData71.pic += separator + url; // 使用分隔符将 URL 拼接到变量中 separator = ','; // 将分隔符设置为逗号，以便处理下一个 URL } console.log("this.tableData71.pic" + this.tableData71.pic); this.$message.success("附件上传成功!"); // 清空表单数据及界面 this.attachFilesceshi = [] }).catch((error) => { console.error(`附件上传失败：${error}`); this.$message.error("附件上传失败!"); this.attachFilesceshi = []; // 清空数组 }); },3.上传数量限制方法,比较随意,自己设置
//上传图片错误方法,公用 handleExceedceshi(files, fileList) { this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，已自动过滤多余的文件。`); },4.浏览/回显方法,添加过滤,防止出现错误url导致出现"加载失败"的走马灯图片
//图片浏览方法,私用 handlePreviewceshi() { if (this.tableData71.pic) { let urls = this.tableData71.pic.split(","); console.log("urls"+"分割"+urls) if (urls.length > 0) { // 过滤掉不合法的 URL urls = urls.filter((url) => { return url.trim().length > 0; // 过滤掉空白字符串或者不合法的 URL }); // 初始化预览图片列表 this.previewImageListceshi = []; urls.forEach((url) => { this.previewImageListceshi.push({ src: url }); }); // 打开图片预览弹窗 this.previewDialogVisibleceshi = true; } } },
data()里面的参数记得设置:
data() { return { previewImageListceshi: [], previewDialogVisibleceshi:false, fileList: [], attachFilesceshi: [], previewImageUrlceshi: '', tableData71 :{ pic: '' } } }后端controller,因为我返回的是绝对路径,若依有获取路径的方法.
@PostMapping("/adds") public String uploadFiles(HttpServletRequest request) throws Exception { // 获取所有的上传文件 Map<String, MultipartFile> fileMap = ((MultipartHttpServletRequest) request).getFileMap(); List<MultipartFile> fileList = new ArrayList<>(fileMap.values()); if (fileList.isEmpty()) { throw new IllegalArgumentException("上传文件不能为空！"); } // 创建一个用于保存所有文件 URL 地址的数组 List<String> filePaths = new ArrayList<>(); // 遍历所有文件，上传并获取文件保存的路径 for (int i = 0; i < fileList.size(); i++) { MultipartFile file = fileList.get(i); if (file.isEmpty()) { throw new IllegalArgumentException("上传文件不能为空！"); } // 修改为获取对应的键名进行文件上传 String filePath = FileUploadUtils.upload(RuoYiConfig.getAttachPath(), file); System.out.println(filePath + " 文件路径"); // 获取服务器的请求地址（修改此处） String url = ServletUtils.getRequest().getScheme() + ":/"+"/" + ServletUtils.getRequest().getServerName() + ":" + ServletUtils.getRequest().getServerPort() + filePath; System.out.println("第 " + i + " 个文件的 URL 是：" + url); // 将文件的 URL 地址保存到数组中 filePaths.add(url); } // 直接返回包含多个 URL 的字符串 return String.join(",", filePaths); }如果是获取相对路径:注意要用相对路径controller需要修改,这里是只能上传单个url的方法
public String uploadFile(@RequestParam("attachFile") MultipartFile file) throws IOException { if (file.isEmpty()) { throw new IllegalArgumentException("上传文件不能为空！"); } // 上传文件并获取文件保存的路径 String filePath = FileUploadUtils.upload(RuoYiConfig.getAttachPath(), file); System.out.println(filePath+"文件路径xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"); // 返回上传的附件在服务器上的保存路径 // 获取服务器的请求地址 HttpServletRequest request = ServletUtils.getRequest(); String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + filePath; System.out.println("文件的 URL 是：" + url); return filePath; }最后是js的api,自己对应controller
设置自己的请求路径即可
//附件上传export function uploadAttachs(data) { return request({ url: 'xxxx/adds', method: 'post', data: data })}总结:大家的业务细节可能不同,实现方法也有多种,如果使用若依框架,本身就已经封装了很多方法,多用其封装好的方法是最方便的,
这篇文章涵盖前后端,大家仅需对业务细节进行修改即可,本身图片上传也是个公用功能,所以大多数情况下直接拷贝即可用