若依的图片上传代码

### 若依框架图片上传实现代码示例 在若依框架中，图片上传功能通常通过 `common-upload` 模块来完成。以下是基于已有引用内容以及常规开发实践总结的代码实现。 #### 后端部分：通用上传方法 后端的核心逻辑主要集中在对文件流的操作上。以下是一个典型的图片上传接口实现： ```java @RestController @RequestMapping("/upload") public class FileUploadController { @Autowired private OssService ossService; // 假设集成了OSS服务 /** * 文件上传接口 */ @PostMapping("/image") public AjaxResult uploadImage(@RequestParam MultipartFile file) { try { if (file.isEmpty()) { return AjaxResult.error("上传失败，请选择文件"); } String fileName = file.getOriginalFilename(); String filePath = System.currentTimeMillis() + "_" + fileName; // 添加水印处理逻辑 BufferedImage bufferedImage = ImageIO.read(file.getInputStream()); addWatermark(bufferedImage, "版权所有"); // 调用水印函数 // 将带有水印的图片保存至临时文件 File tempFile = new File(System.getProperty("java.io.tmpdir") + "/" + filePath); ImageIO.write(bufferedImage, getExtension(fileName), tempFile); // 上传到OSS或其他存储介质 String url = ossService.upload(tempFile); // 返回访问地址 return AjaxResult.success(url); } catch (Exception e) { return AjaxResult.error("上传失败：" + e.getMessage()); } } /** * 添加水印的方法 * * @param image 输入图像对象 * @param watermarkText 水印文字 */ private void addWatermark(BufferedImage image, String watermarkText) throws IOException { int width = image.getWidth(); int height = image.getHeight(); Graphics2D g2d = image.createGraphics(); AlphaComposite alphaChannel = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.5f); g2d.setComposite(alphaChannel); Font font = new Font("宋体", Font.BOLD, Math.min(width / 8, height / 8)); g2d.setFont(font); g2d.setColor(Color.RED); FontMetrics metrics = g2d.getFontMetrics(); Rectangle2D rect = metrics.getStringBounds(watermarkText, g2d); int x = (width - (int) rect.getWidth()) / 2; int y = (height - (int) rect.getHeight()) / 2; g2d.drawString(watermarkText, x, y); g2d.dispose(); } /** * 获取文件扩展名 */ private static String getExtension(String fileName) { return FilenameUtils.getExtension(fileName).toLowerCase(); } } ``` 上述代码实现了图片上传并添加水印的功能[^2]。其中，`addWatermark` 方法用于绘制水印，而 `ossService.upload()` 则负责将图片上传到指定存储位置（如阿里云 OSS）[^3]。 --- #### 前端部分：Vue.js 中的上传组件 前端部分可以通过 Vue 的表单提交方式调用后端 API 完成图片上传操作。以下是一个简单的实现示例： ```vue <template> <div> <el-upload :action="uploadUrl" :headers="headers" name="file" multiple :on-success="handleSuccess"> <el-button type="primary">点击上传</el-button> </el-upload> <!-- 已上传图片展示 --> <ul v-if="imageUrlList.length > 0"> <li v-for="(url, index) in imageUrlList" :key="index"> <img :src="url" alt="Uploaded Image" style="max-width: 100px;" /> </li> </ul> </div> </template> <script> export default { data() { return { uploadUrl: process.env.VUE_APP_BASE_API + "/upload/image", headers: { Authorization: localStorage.getItem('token') }, imageUrlList: [] }; }, methods: { handleSuccess(response) { if (response.code === 200) { this.imageUrlList.push(response.data); } else { this.$message.error(response.msg || '上传失败'); } } } }; </script> ``` 此代码片段展示了如何利用 Element UI 的 `<el-upload>` 组件发起文件上传请求，并在成功回调中更新页面上的已上传图片列表。 --- #### 关键点说明 1. **水印功能** 使用 Java 的 `Graphics2D` 类库可以轻松实现在图片上绘制文字或图案作为水印。 2. **文件路径处理** 需要去除上传文件路径中的多余目录层次，确保最终存储路径的一致性。 3. **前后端交互** 前端通过 HTTP POST 请求发送文件数据给后端，而后端返回文件的访问 URL 或其他元信息[^1]。 ---