用户在前端上传不等数量图片,现在需要把其相对/绝对路径存进数据库中,方便后期使用和页面回显.
后端存储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
})
}
总结:大家的业务细节可能不同,实现方法也有多种,如果使用若依框架,本身就已经封装了很多方法,多用其封装好的方法是最方便的,
这篇文章涵盖前后端,大家仅需对业务细节进行修改即可,本身图片上传也是个公用功能,所以大多数情况下直接拷贝即可用
本文转载自: https://blog.csdn.net/monicateacat/article/details/130658570
版权归原作者 RainCurtainTeaCat 所有， 如有侵权，请联系我们删除。
版权归原作者 RainCurtainTeaCat 所有， 如有侵权，请联系我们删除。