用户在前端上传不等数量图片,现在需要把其相对/绝对路径存进数据库中,方便后期使用和页面回显.

后端存储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
  })
}

总结:大家的业务细节可能不同,实现方法也有多种,如果使用若依框架,本身就已经封装了很多方法,多用其封装好的方法是最方便的,

这篇文章涵盖前后端,大家仅需对业务细节进行修改即可,本身图片上传也是个公用功能,所以大多数情况下直接拷贝即可用