写博客的那些事
程序员文章站
2023-12-30 19:29:04
...
写博客的那些事
-
文件上传
本人选择将图片上传到阿里云的OSS对象存储中,然后使用OSS工具类生成文件的URL,将其保存到数据库中去。
主要有以下步骤:
-
application.yml配置
aliyun: oss: endpoint: oss-cn-hangzhou.aliyuncs.com accessKeyId: LTAI4G4o1ViJkcNqJNiintFv accessKeySecret: zOQvom8XK1ngTau76nZj8h6i3dp14D bucketName: fmxu-blog
-
导入阿里云关于OSS的相关依赖
<dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.6.0</version> </dependency>
-
阿里云的注册设置可以百度
-
创建阿里云OSS工具类
package com.fmxu.util; import com.aliyun.oss.OSSClient; import com.aliyun.oss.model.ObjectMetadata; import com.aliyun.oss.model.PutObjectResult; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component; import org.springframework.web.multipart.MultipartFile; import java.io.IOException; import java.io.InputStream; import java.net.URL; import java.util.Date; import java.util.List; import java.util.UUID; /** * @author Dell * @projectName blog * @description: 阿里云oss工具类 * @date 2021/3/15/9:34 */ @Component public class OssUtils { //---------变量---------- protected static final Logger log = LoggerFactory.getLogger(OssUtils.class); @Value("${aliyun.oss.endpoint}") private String endpoint; @Value("${aliyun.oss.accessKeyId}") private String accessKeyId; @Value("${aliyun.oss.accessKeySecret}") private String accessKeySecret; @Value("${aliyun.oss.bucketName}") private String bucketName; //文件存储目录 private String filedir = "my_file/"; /** * 1、单个文件上传 * @param file * @return 返回完整URL地址 */ public String uploadFile(MultipartFile file) { String fileUrl = uploadImg2Oss(file); String str = getFileUrl(fileUrl); return str.trim(); } /** * 1、单个文件上传(指定文件名(带后缀)) * @param file * @return 返回完整URL地址 */ public String uploadFile(MultipartFile file,String fileName) { try { InputStream inputStream = file.getInputStream(); this.uploadFile2OSS(inputStream, fileName); return fileName; } catch (Exception e) { return "上传失败"; } } /** * 2、多文件上传 * @param fileList * @return 返回完整URL,逗号分隔 */ public String uploadFile(List<MultipartFile> fileList) { String fileUrl = ""; String str = ""; String photoUrl = ""; for(int i = 0;i< fileList.size();i++){ fileUrl = uploadImg2Oss(fileList.get(i)); str = getFileUrl(fileUrl); if(i == 0){ photoUrl = str; }else { photoUrl += "," + str; } } return photoUrl.trim(); } /** * 3、通过文件名获取文完整件路径 * @param fileUrl * @return 完整URL路径 */ public String getFileUrl(String fileUrl) { if (fileUrl !=null && fileUrl.length()>0) { String[] split = fileUrl.split("/"); String url = this.getUrl(this.filedir + split[split.length - 1]); return url; } return null; } //获取去掉参数的完整路径 private String getShortUrl(String url) { String[] imgUrls = url.split("\\?"); return imgUrls[0].trim(); } // 获得url链接 private String getUrl(String key) { // 设置URL过期时间为20年 3600l* 1000*24*365*20 Date expiration = new Date(new Date().getTime() + 3600l * 1000 * 24 * 365 * 20); // 生成URL OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret); URL url = ossClient.generatePresignedUrl(bucketName, key, expiration); if (url != null) { return getShortUrl(url.toString()); } return null; } // 上传文件 private String uploadImg2Oss(MultipartFile file) { //1、限制最大文件为20M if (file.getSize() > 1024 * 1024 *20) { return "图片太大"; } String fileName = file.getOriginalFilename(); String suffix = fileName.substring(fileName.lastIndexOf(".")).toLowerCase(); //文件后缀 String uuid = UUID.randomUUID().toString(); String name = uuid + suffix; try { InputStream inputStream = file.getInputStream(); this.uploadFile2OSS(inputStream, name); return name; } catch (Exception e) { return "上传失败"; } } // 上传文件(指定文件名) private String uploadFile2OSS(InputStream instream, String fileName) { String ret = ""; try { //创建上传Object的Metadata ObjectMetadata objectMetadata = new ObjectMetadata(); objectMetadata.setContentLength(instream.available()); objectMetadata.setCacheControl("no-cache"); objectMetadata.setHeader("Pragma", "no-cache"); objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf(".")))); objectMetadata.setContentDisposition("inline;filename=" + fileName); //上传文件 OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret); PutObjectResult putResult = ossClient.putObject(bucketName, filedir + fileName, instream, objectMetadata); ret = putResult.getETag(); } catch (IOException e) { log.error(e.getMessage(), e); } finally { try { if (instream != null) { instream.close(); } } catch (IOException e) { e.printStackTrace(); } } return ret; } private static String getcontentType(String FilenameExtension) { if (FilenameExtension.equalsIgnoreCase(".bmp")) { return "image/bmp"; } if (FilenameExtension.equalsIgnoreCase(".gif")) { return "image/gif"; } if (FilenameExtension.equalsIgnoreCase(".jpeg") || FilenameExtension.equalsIgnoreCase(".jpg") || FilenameExtension.equalsIgnoreCase(".png")) { return "image/jpeg"; } if (FilenameExtension.equalsIgnoreCase(".html")) { return "text/html"; } if (FilenameExtension.equalsIgnoreCase(".txt")) { return "text/plain"; } if (FilenameExtension.equalsIgnoreCase(".vsd")) { return "application/vnd.visio"; } if (FilenameExtension.equalsIgnoreCase(".pptx") || FilenameExtension.equalsIgnoreCase(".ppt")) { return "application/vnd.ms-powerpoint"; } if (FilenameExtension.equalsIgnoreCase(".docx") || FilenameExtension.equalsIgnoreCase(".doc")) { return "application/msword"; } if (FilenameExtension.equalsIgnoreCase(".xml")) { return "text/xml"; } //PDF if (FilenameExtension.equalsIgnoreCase(".pdf")) { return "application/pdf"; } return "image/jpeg"; } }
-
Controller类
//这个Controller不仅完成了博客的新增,也完成博客的修改功能 @PostMapping("/blog/insert") public String insert(@RequestParam(value = "file")MultipartFile file, Blog blog, RedirectAttributes attributes, HttpSession session){ //注意此部分的格式 @RequestParam(value = "file")MultipartFile file //此处做一个判断 由于数据回显,前端得到的picture属性值是一个URL,如果不修改图片直接提交,则传入的不是图片,由于图片没有改动,所以我们可以判断传入的内容,如果是"image/jpeg",则证明重新上传了图片,当然如果是新增博客,也是上传了照片,则调用OSS工具类 if(file.getContentType().equals("image/jpeg")){ //调用工具类 String url=ossUtils.uploadFile(file); //将得到的URL赋值给名为picture的字段 blog.setPicture(url); }else { //如果没有修改图片,则获取此博客的之前的picture属性值,重新赋值 blog.setPicture(blogService.getBlog(blog.getId()).getPicture()); } }
-
HTML
<!--注意 由于我们实体类定义的picture字段类型为String,所以此处我们不能将name值设为我们的字段名--> <div class="box"> <input type="file" name="file" id="picture" class="inputfile inputfile-2" /> <label for="picture"><i class="ui cloud upload icon"></i><span th:text="*{picture}=='' ? '博客首图' : *{picture}">博客首图</span></label> </div>
-
-
弹出框用于新增修改标签信息
大概意思就是,设置一个弹框,点击事件触发显示,当点击新增标签时,跳出弹框,然后填写信息,点击提交,当我点击编辑标签,也能跳出这个弹框,但是同时也能回显标签原始信息。
下面是弹框的代码:
<div class="ui container"> <div class="sy-alert sy-alert-model animated" id="light"> <div class="ui center sy-title" id="title">添加标签</div> <form class="ui form" id="form" method="post" action="#" th:action="@{/admin/tags/update}"> <div class="ui segment"> <input type="hidden" name="id" id="id"> <div class="required field"> <div class="ui left icon input"> <i class="tags icon"></i> <input type="text" name="name" id="name" placeholder="请输入标签名称...."> </div> </div> </div> <div class="ui center aligned container"> <button id="clear" type="button" class="ui tiny orange button">取消</button> <button class="ui tiny teal button">确定</button> </div> </form> </div> </div> </div>
下面是Controller代码:
根据前端传递过来的id值,判断是做修改,还是新增。首先先判断标签名是否重复,然后id值如果为-,则为新增标签,否则则是修改标签
//修改(增加)标签 @PostMapping("/tags/update") public String update(@Validated Tag tag, BindingResult result,HttpServletRequest request, RedirectAttributes attributes){ Long id=Long.parseLong(request.getParameter("id")); Tag tag01 = tagService.getTagByName(tag.getName()); if(tag01!=null){ attributes.addFlashAttribute("message01","不能重复添加标签!"); return "redirect:/admin/tags"; } if(id!=-1){ tagService.updateTag(id,tag); attributes.addFlashAttribute("message","标签修改成功!"); return "redirect:/admin/tags"; }else { tagService.saveTag(tag); attributes.addFlashAttribute("message","标签添加成功!"); return "redirect:/admin/tags"; } }
-
首先是新增功能
-
新增按钮
<div class="right aligned column"> <button class="ui right floated blue basic button" onclick="insert()">新增</button> </div>
-
点击触发函数
//新增标签 function insert() { clearContent(); document.getElementById('title').innerText='新增标签'; document.getElementById('light').style.display = 'block'; }; //清空回显信息 //由于弹框复用,所以使用前先清除之前回显的信息 function clearContent(){ $("#id").val(-1); $("#name").val(''); };
-
-
修改功能
-
修改按钮
<a href="#" class="ui mini teal button" th:onclick="update([[${tag.id}]])">编辑</a>
-
触发函数 此处用到Ajax
function update(id) { document.getElementById('light').style.display = 'block'; document.getElementById('title').innerText='修改标签'; str =JSON.stringify(id); $.ajax({ type: 'post', dataType: 'json', cache: 'false', url: 'tags/get', data: {"id": str}, success: function (data) { //将数据回显到弹窗 $("#id").val(data.id); $("#name").val(data.name); }, }) }
-
-