用户在前端上传不等数量图片,现在需要把其相对/绝对路径存进数据库中,方便后期使用和页面回显.
后端存储pic字段是字符串 用于 用”,”逗号 拼接 多个图片 url
1.html代码:
新增项目数据图片{{ scope.row.pic}}预览图片前端走马灯浏览已经上传的图片
前端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 {console.log(`服务端返回数据：${res}`);let urls = res.split(","); // 将返回的字符串用逗号分隔开，得到多个 URLconst lastUrlIndex = urls.length - 1; // 记录最后一个 URL 的下标let separator = ''; // 初始化一个分隔符if (this.tableData71.pic) { // 判断变量中是否已经有了 URLseparator = ','; // 如果有，则将分隔符设置为逗号}for (let i = 0; i {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) {// 过滤掉不合法的 URLurls = 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 fileMap = ((MultipartHttpServletRequest) request).getFileMap();List fileList = new ArrayList(fileMap.values());if (fileList.isEmpty()) {throw new IllegalArgumentException("上传文件不能为空！");}// 创建一个用于保存所有文件 URL 地址的数组List 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})}总结:大家的业务细节可能不同,实现方法也有多种,如果使用若依框架,本身就已经封装了很多方法,多用其封装好的方法是最方便的,
这篇文章涵盖前后端,大家仅需对业务细节进行修改即可,本身图片上传也是个公用功能,所以大多数情况下直接拷贝即可用