山东大学软件学院项目实训-基于大模型的模拟面试系统-Vditor编辑器上传图片

Vditor编辑器图片上传功能

使用Vditor进行图片上传时,会返回图片在后端的相对路径,这在前端是无法进行显示的(如下图)

于是为了将图片正常·显示,我采取了和头像上传一样的解决方案,使用阿里云图床进行存储。

实现步骤

首先定位Vditor编辑器向后端发送的请求,根据浏览器的开发者工具,我们找到了具体的API(如下图)

下面是UploadController.java文件中的与该次请求相关的方法。

java 复制代码
    @PostMapping("/file/batch")
    @Transactional(rollbackFor = Exception.class)
    public GlobalResult<JSONObject> batchFileUpload(@RequestParam(value = "file[]", required = false) MultipartFile[] multipartFiles, @RequestParam(defaultValue = "1") Integer type, HttpServletRequest request) {
        TokenUser tokenUser = getTokenUser(request);
        File file = genFile(type);
        String typePath = FilePath.getPath(type);
        String localPath = Utils.getProperty("resource.file-path") + "/" + typePath + "/";
        Map<String, String> successMap = new HashMap<>(16);
        Set<String> errFiles = new HashSet<>();

        for (MultipartFile multipartFile : multipartFiles) {
            String orgName = multipartFile.getOriginalFilename();

            if (multipartFile.getSize() == 0) {
                errFiles.add(orgName);
                continue;
            }
            String fileType = FileUtils.getExtend(orgName);
            try {
                String md5 = DigestUtils.md5DigestAsHex(multipartFile.getBytes());
                String fileUrl = forestFileService.getFileUrlByMd5(md5, tokenUser.getIdUser(), fileType);
                if (StringUtils.isNotEmpty(fileUrl)) {
                    successMap.put(orgName, fileUrl);
                    continue;
                }
                String fileName = System.currentTimeMillis() + fileType;
                String savePath = file.getPath() + File.separator + fileName;
                File saveFile = new File(savePath);
                fileUrl = localPath + fileName;
                FileCopyUtils.copy(multipartFile.getBytes(), saveFile);
                forestFileService.insertForestFile(fileUrl, savePath, md5, tokenUser.getIdUser(), multipartFile.getSize(), fileType);
                successMap.put(orgName, localPath + fileName);
            } catch (IOException e) {
                errFiles.add(orgName);
            }

        }
        JSONObject data = new JSONObject(2);
        data.put("errFiles", errFiles);
        data.put("succMap", successMap);
        return GlobalResultGenerator.genSuccessResult(data);
    }

这段代码实现了一个批量文件上传的功能:

  • 主要逻辑部分:
    • 检查文件大小,跳过空文件
    • 计算文件MD5值用于去重
    • 检查数据库中是否已存在相同MD5的文件,如果存在则直接返回已有URL
    • 生成唯一文件名(时间戳+文件扩展名)
    • 构建文件保存路径
    • 将文件内容复制到目标位置
    • 在数据库中记录文件信息
    • 将文件URL添加到成功列表
  • 使用MD5进行文件去重,避免重复存储相同内容的文件
  • 使用事务确保数据一致性
  • 分别记录成功和失败的文件,提供完整的上传结果

要修改的就是file_url相关的部分,根据数据库表结构可以知道有两个列与路径有关,分别是file_pathfile_url,原本这两个列存储的是相同的值,现在进行修改将file_url改为存储真正的阿里云图床的URL。

首先在OSSUpload.java里添加一个新的上传方法:

java 复制代码
    /**
     * 上传MultipartFile文件到OSS
     * 
     * @param file MultipartFile文件
     * @param folder 文件夹路径
     * @return 访问URL
     * @throws IOException IO异常
     */
    public String uploadFileToOSS(MultipartFile file, String folder) throws IOException {
        try {
            // 1. 获取文件名和扩展名
            String originalFilename = file.getOriginalFilename();
            String fileType = originalFilename.substring(originalFilename.lastIndexOf("."));
            
            // 2. 生成唯一文件名
            String fileName = folder + UUID.randomUUID() + fileType;
            
            // 3. 上传文件到OSS
            ossClient.putObject(
                    ossConfig.getBucketName(),
                    fileName,
                    new ByteArrayInputStream(file.getBytes())
            );
            
            // 4. 返回访问URL
            return "https://" + ossConfig.getBucketName() + "." + ossConfig.getEndpoint() + "/" + fileName;
        } catch (Exception e) {
            throw new RuntimeException("上传文件到OSS失败: " + e.getMessage(), e);
        }
    }

然后修改batchFileUpload方法的逻辑:

java 复制代码
    @PostMapping("/file/batch")
    @Transactional(rollbackFor = Exception.class)
    public GlobalResult<JSONObject> batchFileUpload(@RequestParam(value = "file[]", required = false) MultipartFile[] multipartFiles, @RequestParam(defaultValue = "1") Integer type, HttpServletRequest request) {
        TokenUser tokenUser = getTokenUser(request);
        File file = genFile(type);
        String typePath = FilePath.getPath(type);
        String localPath = Utils.getProperty("resource.file-path") + "/" + typePath + "/";
        Map<String, String> successMap = new HashMap<>(16);
        Set<String> errFiles = new HashSet<>();

        for (MultipartFile multipartFile : multipartFiles) {
            String orgName = multipartFile.getOriginalFilename();

            if (multipartFile.getSize() == 0) {
                errFiles.add(orgName);
                continue;
            }
            String fileType = FileUtils.getExtend(orgName);
            try {
                String md5 = DigestUtils.md5DigestAsHex(multipartFile.getBytes());
                String fileUrl = forestFileService.getFileUrlByMd5(md5, tokenUser.getIdUser(), fileType);
                if (StringUtils.isNotEmpty(fileUrl)) {
                    successMap.put(orgName, fileUrl);
                    continue;
                }
                String fileName = System.currentTimeMillis() + fileType;
                String savePath = file.getPath() + File.separator + fileName;
                File saveFile = new File(savePath);
//                fileUrl = localPath + fileName;
                // 使用OSS上传文件
                fileUrl = ossUpload.uploadFileToOSS(multipartFile, typePath + "/article");
                successMap.put(orgName, fileUrl);
                FileCopyUtils.copy(multipartFile.getBytes(), saveFile);
                forestFileService.insertForestFile(fileUrl, savePath, md5, tokenUser.getIdUser(), multipartFile.getSize(), fileType);
//                successMap.put(orgName, localPath + fileName);
            } catch (IOException e) {
                errFiles.add(orgName);
            }

        }
        JSONObject data = new JSONObject(2);
        data.put("errFiles", errFiles);
        data.put("succMap", successMap);
        return GlobalResultGenerator.genSuccessResult(data);
    }

最后,图片能够正常上传和显示:

相关推荐
jingling55522 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
莫空000027 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
wuxinyan1232 小时前
Java面试题033:一文深入了解MySQL(5)
java·数据库·mysql·面试
笑衬人心。2 小时前
HTTPS详解:原理 + 加解密过程 + 面试问答
java·网络协议·http·面试·https
欧阳有财3 小时前
[java八股文][Mysql面试篇]日志
java·mysql·面试
我是哪吒4 小时前
分布式微服务系统架构第155集:JavaPlus技术文档平台日更-Java线程池实现原理
后端·面试·github
红衣信4 小时前
前端与后端存储全解析:从 Cookie 到缓存策略
前端·后端·面试
NeRF_er5 小时前
使用 VScode Debug加不上断点的原因
ide·vscode·编辑器
前端小巷子5 小时前
跨域问题解决方案:JSONP
前端·javascript·面试
MediaTea12 小时前
Python 编辑器:Thonny
编辑器