使用阿里云对象存储上传图片后,在浏览器中访问返回的url地址,直接提示下载,不是预览

使用阿里云对象存储上传图片后,在浏览器中访问返回的url地址,直接提示下载,不是预览

不想要的效果:
在这里插入图片描述
想要效果:
在这里插入图片描述

业务逻辑层就是ServiceImpl层

之前代码:

package com.ren.oss.service.impl;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.ObjectMetadata;
import com.aliyun.oss.model.PutObjectRequest;
import com.ren.oss.service.OssService;
import com.ren.oss.utils.ConstantPropertiesUtils;
import org.joda.time.DateTime;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.InputStream;
import java.util.UUID;

/**
 * @author 怜儿
 * @create 2021-01-22 1:01
 **/
@Service
public class OssServiceImpl implements OssService {
    /**
     * Service实现上传头像到OSS
     * @param file
     * @return
     */
    @Override
    public String uploadFileAvatar(MultipartFile file) {
        // 1.通过工具类获取常量值
        String endPoint = ConstantPropertiesUtils.END_POINT;
        String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID;
        String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET;
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;
        try {
            // 2.创建OSS实例
            OSS ossClient = new OSSClientBuilder().build(endPoint, accessKeyId, accessKeySecret);
            // 3.获取上传的文件的输入流
            InputStream inputStream = file.getInputStream();
            // 4.获取文件名称
            String fileName = file.getOriginalFilename();

            /**
             * 5.调用oss方法实现上传
             * 第一个参数 Bucket名称
             * 第二个参数 上传oss文件路径和名称 aa/bb/1.jpg
             * 第三个参数 上传文件的输入流
             */

            // 6.在文件名称里面添加随机唯一值,使用UUID生成
            String uuid = UUID.randomUUID().toString().replaceAll("-", "");
            fileName = uuid + fileName;
            // 7.把文件按照日期进行分类
            // 获取当前日期
            String datePath = new DateTime().toString("yyyy/MM/dd");
            // 拼接fileName
            fileName = datePath + "/" + fileName;
            ossClient.putObject(bucketName, fileName, inputStream);
            // 8.关闭ossClient
            ossClient.shutdown();

            // 9.把上传到oss的路径返回
            // 需要将路径手动拼接出来,https://xxxxxx.oss-cn-shanghai.aliyuncs.com/edu/avatar/xxxxxx.jpg
            String url = "https://"+ bucketName + "." + endPoint + "/" + fileName;
            return url;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
}

修改之后的代码:

package com.ren.oss.service.impl;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.ObjectMetadata;
import com.aliyun.oss.model.PutObjectRequest;
import com.ren.oss.service.OssService;
import com.ren.oss.utils.ConstantPropertiesUtils;
import org.joda.time.DateTime;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.InputStream;
import java.util.UUID;

/**
 * @author 怜儿
 * @create 2021-01-22 1:01
 **/
@Service
public class OssServiceImpl implements OssService {
    /**
     * Service实现上传头像到OSS
     * @param file
     * @return
     */
    @Override
    public String uploadFileAvatar(MultipartFile file) {
        // 1.通过工具类获取常量值
        String endPoint = ConstantPropertiesUtils.END_POINT;
        String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID;
        String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET;
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;
        try {
            // 2.创建OSS实例
            OSS ossClient = new OSSClientBuilder().build(endPoint, accessKeyId, accessKeySecret);
            // 3.获取上传的文件的输入流
            InputStream inputStream = file.getInputStream();
            // 4.获取文件名称
            String fileName = file.getOriginalFilename();
            
            /**
             * 6.调用oss方法实现上传
             * 第一个参数 Bucket名称
             * 第二个参数 上传oss文件路径和名称 aa/bb/1.jpg
             * 第三个参数 上传文件的输入流
             */

            // 7.在文件名称里面添加随机唯一值,使用UUID生成
            String uuid = UUID.randomUUID().toString().replaceAll("-", "");
            fileName = uuid + fileName;
            // 8.把文件按照日期进行分类
            // 获取当前日期
            String datePath = new DateTime().toString("yyyy/MM/dd");
            // 9.拼接fileName
            fileName = datePath + "/" + fileName;
      		// 10.如果需要上传时设置存储类型与访问权限,请参考以下示例代码。
            ObjectMetadata metadata = new ObjectMetadata();         metadata.setContentType(getContentType(fileName.substring(fileName.lastIndexOf("."))));

            // 11.<yourObjectName>表示上传文件到OSS时需要指定包含文件后缀在内的完整路径,例如abc/efg/123.jpg。
            PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, fileName, inputStream);
            putObjectRequest.setMetadata(metadata);
			// ossClient.putObject(bucketName, fileName, inputStream);
            ossClient.putObject(putObjectRequest);
            // 12.关闭ossClient
            ossClient.shutdown();
            // 13.把上传到oss的路径返回
            // 需要将路径手动拼接出来,https://xxxxxx.oss-cn-shanghai.aliyuncs.com/edu/avatar/girl.jpg
            String url = "https://"+ bucketName + "." + endPoint + "/" + fileName;
            return url;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    /**
     * 返回contentType
     * @param FileNameExtension
     * @return
     */
    public 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/jpg";
        }
        return "image/jpg";
    }
}

一定要注意加入的代码顺序,要在拼接fileName之后 new PutObjectRequest(),不然可能存放的位置有点不对劲

最后测试返回的url地址,就可以达到预览的效果了

在这里插入图片描述

下面也为您提供了这个demo的其他代码哦,想瞅瞅的话可以往下面翻翻哦

配置文件application.properties

# 服务端口号
server.port=8002
# 服务名
spring.application.name=service-oss

# nacos 服务地址
# spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

# 环境设置:dev,prod,test
spring.profiles.active=dev

# 阿里云OSS
# 不同的服务器,地址不同,这里的endpoint和keyid还有keysecret,bucketname要用你自己在阿里云的OSS对象里面注册的哦,也不贵,自己研究来玩,我充的1元目前还没有扣费,嘿嘿
aliyun.oss.file.endpoint=oss-cn-shanghai.aliyuncs.com
aliyun.oss.file.keyid=LTAI4G6u1cRpMpYrSasi7BCi
aliyun.oss.file.keysecret=9kCPmihuyaCLc6ww6eUvw6c31obI8n
# bucket可以在控制台创建,也可以使用java代码创建
aliyun.oss.file.bucketname=xxx

我自己学习的时候是封装了个ConstantPropertiesUtils常量类的

package com.ren.oss.utils;

import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

/**
 * @author 怜儿
 * @create 2021-01-22 0:49
 * 当项目已启动后,Spring接口,Spring加载之后,执行一个接口方法 InitializingBean
 **/
@Component
public class ConstantPropertiesUtils implements InitializingBean {

    /**
     * 读取配置文件中的内容
     */
    @Value("${aliyun.oss.file.endpoint}")
    private String endPoint;

    @Value("${aliyun.oss.file.keyid}")
    private String keyId;

    @Value("${aliyun.oss.file.keysecret}")
    private String keySecret;

    @Value("${aliyun.oss.file.bucketname}")
    private String bucketName;

    /**
     * 当Spring容器将所有的@Value注解中的值注入初始化完成之后,就执行这个方法
     * 定义公开静态常量
     * @throws Exception
     */
    public static String END_POINT;
    public static String ACCESS_KEY_ID;
    public static String ACCESS_KEY_SECRET;
    public static String BUCKET_NAME;

    @Override
    public void afterPropertiesSet() throws Exception {
        END_POINT = endPoint;
        ACCESS_KEY_ID = keyId;
        ACCESS_KEY_SECRET = keySecret;
        BUCKET_NAME = bucketName;
    }
}

控制层Controller层:

package com.ren.oss.controller;

import com.ren.oss.service.OssService;
import com.ren.utils.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

/**
 * @author 怜儿
 * @create 2021-01-22 1:01
 **/
@RestController
@RequestMapping("/oss/file")
@CrossOrigin
public class OssController {

    @Autowired
    private OssService ossService;

    /**
     * 上传头像的方法
     * @param file
     * @return
     */
    @PostMapping
    public Result uploadOssFile(MultipartFile file) {
        // 获取上传的文件 MultipartFile
        // 返回上传的文件路径url
        String url = ossService.uploadFileAvatar(file);
        return Result.success().data("url", url);
    }
}

Service接口层:

package com.ren.oss.service;

import org.springframework.web.multipart.MultipartFile;

/**
 * @author 怜儿
 * @create 2021-01-22 1:01
 **/
public interface OssService {
    String uploadFileAvatar(MultipartFile file);
}

启动类

package com.ren.oss;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
//import org.springframework.cloud.client.discovery.EnableDiscoveryClient;
import org.springframework.context.annotation.ComponentScan;

/**
 * @author 怜儿
 * @create 2021-01-22 0:29
 * 由于OSS服务不需要加载数据库,所以可以在SpringBootApplication注解中加上exclude = DataSourceAutoConfiguration.class,表示不去加载数据库
 **/
@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)
@ComponentScan(basePackages = {"com.ren"})
//@EnableDiscoveryClient   // 开启nacos服务需要添加这个注解
public class OssServiceApplication {
    public static void main(String[] args) {
        SpringApplication.run(OssServiceApplication.class, args);
    }
}

要是有帮助到你的话也可以给我点一波赞哦,谢谢!

参考文档:https://help.aliyun.com/document_detail/84781.html?spm=a2c4g.11186623.2.2.4be37a74C0xvnp

  • 5
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值