SpringBoot+Vue图片上传到阿里云OSS教程

系统管理员 2023-09-30 10:39 19阅读 0赞

#### 一、开通 OSS ####

OSS 也就是 Object Storage Service，是阿里云提供的一套对象存储服务，国内的竞品还有七牛云的 Kodo和腾讯云的COS。

第一步，登录阿里云官网，搜索“OSS”关键字，进入 OSS 产品页。

第二步，如果是 OSS 新用户的话，可以享受 6 个月的新人专享优惠价，不过续费的时候还是会肉疼。

第三步，进入 OSS 管理控制台，点击「Bucket 列表」，点击「创建 Bucket」。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg_size_17_color_FFFFFF_t_70_g_se_x_16][]

Bucket 的词面意思是桶，这里指存储空间，就是用于存储对象的容器。注意读写权限为“公共读”，也就是允许互联网用户访问云空间上的图片。

第四步，点击「确定」就算是开通成功了。

#### 二、整合 OSS ####

第一步，在 pom.xml 文件中添加 OSS 的依赖。

<dependency>
        <groupId>com.aliyun.oss</groupId>
        <artifactId>aliyun-sdk-oss</artifactId>
        <version>3.10.2</version>
    </dependency>

第二步，在 application.yml 文件中添加 OSS 配置项。

aliyun:
      oss:
          # oss对外服务的访问域名
        endpoint: oss-cn-beijing.aliyuncs.com
          # 访问身份验证中用到用户标识
        accessKeyId: LTAI5
          # 用户用于加密签名字符串和oss用来验证签名字符串的密钥
        accessKeySecret: RYN
          # oss的存储空间
        bucketName: itwanger-oss1
          # 上传文件大小(M)
        maxSize: 3
          # 上传文件夹路径前缀
        dir:
          prefix: codingmore/images/

第三步，新增 OssClientConfig.java 配置类，主要就是通过 @Value 注解从配置文件中获取配置项，然后创建 OSSClient。

@Configuration
    public class OssClientConfig {
        @Value("${aliyun.oss.endpoint}")
        String endpoint ;
        @Value("${aliyun.oss.accessKeyId}")
        String accessKeyId ;
        @Value("${aliyun.oss.accessKeySecret}")
        String accessKeySecret;
    
        @Bean
        public OSSClient createOssClient() {
            return (OSSClient)new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        }
    }

第四步，新增文件上传接口 OssController.java，参数为 MultipartFile。

@Controller
    @Api(tags = "上传")
    @RequestMapping("/ossController")
    public class OssController {
        @Autowired
        private IOssService ossService;
    
        @RequestMapping(value = "/upload",method=RequestMethod.POST)
        @ResponseBody
        @ApiOperation("上传")
        public ResultObject<String> upload(@RequestParam("file") MultipartFile file, HttpServletRequest req)  {
            return ResultObject.success(ossService.upload(file));
        }
    }

第五步，新增 Service，将文件上传到 OSS，并返回文件保存路径。

@Service
    public class OssServiceImpl implements IOssService{
    
        @Value("${aliyun.oss.maxSize}")
        private int maxSize;
       
        @Value("${aliyun.oss.bucketName}")
        private String bucketName;
      
        @Value("${aliyun.oss.dir.prefix}")
        private String dirPrefix;
        
        @Autowired
        private OSSClient ossClient;   
        @Override
        public String upload(MultipartFile file) {
            try {
                return upload(file.getInputStream(), file.getOriginalFilename());
            } catch (IOException e) {
                LOGGER.error(e.getMessage());
            }
            return null;
        }
    
        @Override
        public String upload(InputStream inputStream,String name) {
            String objectName = getBucketName(name);
            // 创建PutObject请求。
            ossClient.putObject(bucketName, objectName, inputStream);
            return formatPath(objectName);
        }
        private String getBucketName(String url){
            String ext = "";
            for(String extItem:imageExtension){
                if(url.indexOf(extItem) != -1){
                    ext = extItem;
                    break;
                }
            }
            return dirPrefix+ DateUtil.today()+"/"+ IdUtil.randomUUID()+ext;
        }
    
        private String formatPath(String objectName){
            return "https://"  +bucketName+"."+ ossClient.getEndpoint().getHost() + "/" + objectName;
        }
    }

第六步，打开 Apipost，测试 OSS 上传接口，注意参数选择文件，点击发送后可以看到服务器端返回的图片链接。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg_size_20_color_FFFFFF_t_70_g_se_x_16][]

第七步，进入阿里云 OSS 后台管理，可以确认图片确实已经上传成功。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg_size_15_color_FFFFFF_t_70_g_se_x_16][]

#### 三、拉取前端代码来测试 OSS 上传接口 ####

执行 `yarn run dev` 命令后就可以启动 Web 管理端了，进入到文章编辑页面，选择一张图片进行上传，可以确认图片是可以正常从前端上传到服务器端，服务器端再上传到 OSS，之后再返回前端图片访问链接的。

#### 四、利用 OSS 进行自动转链 ####

第一步，在 PostsServiceImpl.java 中添加图片转链的方法，主要利用正则表达式找出文章内容中的外链，然后将外链的图片上传到 OSS，然后再替换掉原来的外链图片。

// 匹配图片的 markdown 语法
    // ![](hhhx.png)
    // ![xx](hhhx.png?ax)
    public static final String IMG_PATTERN = "\\!\\[.*\\]\$(.*)\$";
    
    private void handleContentImg(Posts posts) {
        String content = posts.getPostContent();
    
        Pattern p = Pattern.compile(IMG_PATTERN, Pattern.CASE_INSENSITIVE);
        Matcher m = p.matcher(content);
    
        Map<String, Future<String>> map = new HashMap<>();
    
        while (m.find()) {
            String imageTag = m.group();
            LOGGER.info("使用分组进行替换{}", imageTag);
    
            String imageUrl = imageTag.substring(imageTag.indexOf("(") + 1, imageTag.indexOf(")"));
    
            // 确认是本站链接，不处理
            if (imageUrl.indexOf(iOssService.getEndPoint()) != -1) {
                continue;
            }
    
            // 通过线程池将图片上传到 OSS
            Future<String> future = ossUploadImageExecutor.submit(() -> {
                return iOssService.upload(imageUrl);
            });
            map.put(imageUrl, future);
        }
    
        for (String oldUrl : map.keySet()) {
            Future<String> future = map.get(oldUrl);
    
            try {
               String imageUrl = future.get();
               content = content.replace(oldUrl, imageUrl);
            } catch (InterruptedException | ExecutionException e) {
                LOGGER.error("获取图片链接出错{}", e.getMessage());
            }
            
        }
        posts.setPostContent(content);
    }

第二步，在 OssServiceImpl.java 中添加根据外链地址上传图片到 OSS 的方法。

public String upload(String url) {
        String objectName = getFileName(url);
        try (InputStream inputStream = new URL(url).openStream()) {
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (IOException e) {
            LOGGER.error(e.getMessage());
        }
        return formatOSSPath(objectName);
    }

第三步，通过 Web 管理端来测试外链是否转链成功。先找两张外链的图片，可以看到 markdown 在预览的时候就不显示。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg_size_15_color_FFFFFF_t_70_g_se_x_16 1][]

然后我们点击发布，可以看到两张图片都正常显示了，因为转成了 OSS 的图片访问地址。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg_size_15_color_FFFFFF_t_70_g_se_x_16 2][]

> 作者：沉默王二

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/24e6919b175c44c69fa3ce850b8a237a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6e09b359fdac477bb74cfc7681c0cc05.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/681f949af99f43c1a1115d965c01c41b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg==,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg_size_15_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/ff9b24912e67410b992e0b4222b891b5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg==,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg_size_15_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/45aae67652cd453a8eeed8bec7949f38.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAamF2YeaZtOWkqei_h-WQjg==,size_15,color_FFFFFF,t_70,g_se,x_16