Spring boot上传图片的两种使用方式(阿里OSS存储&本地存储)

这里介绍两种上传存储方式

一、将图片上传到阿里OSS

1.引入依赖

<!--AliOss-->
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>2.8.3</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.4</version>
        </dependency>
        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
            <version>2.9.9</version>
        </dependency>

2.编写aliyun.properties配置文件

accessKeyId以及accessKeySecret获取参考官方文档:
https://help.aliyun.com/knowledge_detail/48699.html

3.编写AliyunConfig配置类

@Configuration
@PropertySource("aliyun.properties")
@ConfigurationProperties(prefix = "aliyun")
public class AlyunConfig {
    private String endpoint;
    private String accessKeyId;
    private String accessKeySecret;
    private String bucketName;
    private String urlPrefix;

    @Bean
    public OSS oSSClient() {
        return new OSSClient(endpoint, accessKeyId, accessKeySecret);
    }

    public String getEndpoint() {
        return endpoint;
    }

    public void setEndpoint(String endpoint) {
        this.endpoint = endpoint;
    }

    public String getAccessKeyId() {
        return accessKeyId;
    }

    public void setAccessKeyId(String accessKeyId) {
        this.accessKeyId = accessKeyId;
    }

    public String getAccessKeySecret() {
        return accessKeySecret;
    }

    public void setAccessKeySecret(String accessKeySecret) {
        this.accessKeySecret = accessKeySecret;
    }

    public String getBucketName() {
        return bucketName;
    }

    public void setBucketName(String bucketName) {
        this.bucketName = bucketName;
    }

    public String getUrlPrefix() {
        return urlPrefix;
    }

    public void setUrlPrefix(String urlPrefix) {
        this.urlPrefix = urlPrefix;
    }
}

4.编写PicUploadResult

该类用于返回给前端的数据结构定义

public class PicUploadResult {
    // 文件唯一标识
    private String uid;
    // 文件名
    private String name;
    // 状态有:uploading done error removed
    private String status;
    // 服务端响应内容,如:'{"status": "success"}'
    private String response;

    public String getUid() {
        return uid;
    }

    public void setUid(String uid) {
        this.uid = uid;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }

    public String getResponse() {
        return response;
    }

    public void setResponse(String response) {
        this.response = response;
    }
}

5.编写PicUploadService

具体的上传逻辑实现,在该类中调用了OSS客户端的API。
 

@Service
public class picUploadService {
    // 允许上传的格式
    private static final String[] IMAGE_TYPE = new String[]{".bmp", ".jpg", ".jpeg", ".gif", ".png"};
    @Autowired
    private OSS ossClient;
    @Autowired
    private AlyunConfig aliyunConfig;


    public PicUploadResult upload(MultipartFile uploadFile) {
        // 校验图片格式
        boolean isLegal = false;
        for (String type : IMAGE_TYPE) {
            if (StringUtils.endsWithIgnoreCase(uploadFile.getOriginalFilename(),
                    type)) {isLegal = true;
                break;
            }
        } // 封装Result对象,并且将文件的byte数组放置到result对象中
        PicUploadResult fileUploadResult = new PicUploadResult();
        if(!isLegal){
            fileUploadResult.setStatus("error");
            return fileUploadResult;
        } // 文件新路径
        String fileName = uploadFile.getOriginalFilename();
        String filePath = getFilePath(fileName);
        // 上传到阿里云
        try {
            ossClient.putObject(aliyunConfig.getBucketName(), filePath, new ByteArrayInputStream(uploadFile.getBytes()));
        } catch (Exception e) {
            e.printStackTrace();
            //上传失败
            fileUploadResult.setStatus("error");
            return fileUploadResult;
        } 
        fileUploadResult.setStatus("done");
        fileUploadResult.setName(this.aliyunConfig.getUrlPrefix() + filePath);
        fileUploadResult.setUid(String.valueOf(System.currentTimeMillis()));
        return fileUploadResult;
    }
    private String getFilePath(String sourceFileName) {
        DateTime dateTime = new DateTime();
        return "images/" + dateTime.toString("yyyy")
                + "/" + dateTime.toString("MM") + "/"
                + dateTime.toString("dd") + "/" + System.currentTimeMillis() +
                RandomUtils.nextInt(100, 9999) + "." +
                StringUtils.substringAfterLast(sourceFileName, ".");
    }
}

这里生成图片id为了方便采用的是以当前秒数做id

6.编写PicUploadController

@Controller
public class PicUploadController {

@Autowired
private picUploadService picUploadService;

@RequestMapping("/pic/upload")
    @PostMapping
    @ResponseBody
    public PicUploadResult upload(@RequestParam("file") MultipartFile uploadFile)
            throws Exception {
        return this.picUploadService.upload(uploadFile);
    }
}

启动启动类PicApplication

7.测试

测试工具:Postman

注意这里的key一定要与@RequestParam("file") 中的相同

上传文件时报错

显示文件的大小超出了允许的范围。查看了官方文档,原来Spring Boot工程嵌入的tomcat限制了请求的文件大小 

我这里使用的是spring boot2.0

解决办法

在yml文件配置

其它Spring boot版本配置可以参考这篇博客https://blog.csdn.net/u010429286/article/details/54381705

最后问题解决 数据正确返回

访问name地址查看图片 查看oss中是否有该文件

二、本地文件系统存储

1.编写picUploadFileSystemService

@Service
public class PicUploadFileSystemService {
    // 允许上传的格式
    private static final String[] IMAGE_TYPE = new String[]{".bmp", ".jpg",
            ".jpeg", ".gif", ".png"};
    public PicUploadResult upload(MultipartFile uploadFile) {
    //校验图片格式
        boolean isLegal = false;
        for (String type : IMAGE_TYPE) {
            if (StringUtils.endsWithIgnoreCase(uploadFile.getOriginalFilename(),
                    type)) {
                isLegal = true;
                break;
            }
        }
        // 封装Result对象,并且将文件的byte数组放置到result对象中
        PicUploadResult fileUploadResult = new PicUploadResult();
        if (!isLegal) {
            fileUploadResult.setStatus("error");
            return fileUploadResult;
        }
        // 文件新路径
        String fileName = uploadFile.getOriginalFilename();
        String filePath = getFilePath(fileName);
        // 生成图片的绝对引用地址
        String picUrl = StringUtils.replace(StringUtils.substringAfter(filePath,
                "E:\\code\\test-upload\\images"),
                "\\", "/");
        //访问路径
        fileUploadResult.setName("www.test.image" + picUrl);
        File newFile = new File(filePath);
        // 写文件到磁盘
        try {
            uploadFile.transferTo(newFile);
        } catch (IOException e) {
            e.printStackTrace();
        //上传失败
            fileUploadResult.setStatus("error");
            return fileUploadResult;
        }
        fileUploadResult.setStatus("done");
        fileUploadResult.setUid(String.valueOf(System.currentTimeMillis()));
        return fileUploadResult;
    }
    private String getFilePath(String sourceFileName) {
        String baseFolder = "E:\\code\\test-upload" + File.separator
                + "images";
        Date nowDate = new Date();
        // yyyy/MM/dd
        String fileFolder = baseFolder + File.separator + new
                DateTime(nowDate).toString("yyyy")
                + File.separator + new DateTime(nowDate).toString("MM") +
                File.separator
                + new DateTime(nowDate).toString("dd");
        File file = new File(fileFolder);
        if (!file.isDirectory()) {
        // 如果目录不存在,则创建目录
            file.mkdirs();
        }
        // 生成新的文件名
        String fileName = new DateTime(nowDate).toString("yyyyMMddhhmmssSSSS")
                + RandomUtils.nextInt(100, 9999) + "." +
                StringUtils.substringAfterLast(sourceFileName, ".");
        return fileFolder + File.separator + fileName;
    }
}

2.编写PicUploadController

@Controller
public class PicUploadController {

@Autowired
private PicUploadFileSystemService picUploadFileSystemService;

@RequestMapping("/pic/upload")
    @PostMapping
    @ResponseBody
    public PicUploadResult upload(@RequestParam("file") MultipartFile uploadFile)
            throws Exception {
        return this.picUploadFileSystemService.upload(uploadFile);
    }
}

3.测试

4.搭建nginx进行访问图片

修改nginx.conf文件

启动nginx

由于没有域名 这里测试就通过SwitchHosts软件修改本地host文件来实现域名访问

软件下载链接https://download.csdn.net/download/guisu97/11224672

访问 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 前端使用HTML5的File API获取用户选择的图片,然后将图片转成二进制流,通过Ajax请求发送给后端。 后端使用阿里云OSS SDK,上图片OSS。具体步骤如下: 1. 引入阿里云OSS SDK依赖: ``` &lt;dependency&gt; &lt;groupId&gt;com.aliyun.oss&lt;/groupId&gt; &lt;artifactId&gt;aliyun-sdk-oss&lt;/artifactId&gt; &lt;version&gt;3.10.2&lt;/version&gt; &lt;/dependency&gt; ``` 2. 在Springboot配置文件中配置OSS相关参数: ``` oss.endpoint=oss-cn-hangzhou.aliyuncs.com oss.accessKeyId=your_access_key_id oss.accessKeySecret=your_access_key_secret oss.bucketName=your_bucket_name ``` 3. 在Controller中编写上图片的接口: ``` @PostMapping(&quot;/upload&quot;) public String upload(@RequestParam(&quot;file&quot;) MultipartFile file) throws IOException { // 获取文件名 String fileName = file.getOriginalFilename(); // 上OSS OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); ossClient.putObject(bucketName, fileName, file.getInputStream()); // 关闭OSS客户端 ossClient.shutdown(); // 返回图片URL return &quot;https://&quot; + bucketName + &quot;.&quot; + endpoint + &quot;/&quot; + fileName; } ``` 4. 前端通过Ajax请求上图片: ``` function uploadImage() { var file = document.getElementById(&quot;file&quot;).files[0]; var formData = new FormData(); formData.append(&quot;file&quot;, file); $.ajax({ url: &quot;/upload&quot;, type: &quot;POST&quot;, data: formData, processData: false, contentType: false, success: function(data) { console.log(data); } }); } ``` 需要注意的是,前端上的文件大小可能比较大,需要在后端进行文件大小和类型的校验,防止恶意攻击和服务器压力过大。 ### 回答2: 前端上图片Spring Boot后端,然后后端将图片OSS(Object Storage Service)中。 首先,前端需要通过一个表单页面或者其他方式选择要上图片。当用户选择完成后,前端可以使用一个AJAX请求将图片发送给后端。 在后端,我们需要配置一个用于接收图片并上OSS的路由或API接口。这个接口需要处理用户上图片文件,并将其保存到本地的临时文件夹中。 然后,我们需要引入相应的OSS客户端库,比如阿里云的OSS SDK。在后端中,我们需要配置OSS的相关信息,比如Access Key ID(访问密钥ID)、Access Key Secret(访问密钥密码)、OSS域名等。 接下来,我们需要将保存在本地的临时文件上OSS。首先,我们需要创建一个OSSClient对象,使用OSSClient的构造函数入配置的OSS相关信息。 然后,我们可以调用OSSClient对象的putObject方法来上图片。在putObject方法中,我们需要指定要上的目标Bucket(OSS存储空间),以及目标图片存储路径和文件名。同时,我们也需要指定要上的文件的本地路径。 上完成后,我们可以在OSS中看到上图片。 最后,在后端中,我们可以返回一个上成功的消息或者其他相应的数据给前端,以表示图片OSS的状态。 总结而言,前端上图片Spring Boot后端,后端将图片OSS步骤包括:前端选择图片并上至后端,后端保存图片到本地临时文件夹,配置OSS并引入相关OSS客户端库,创建OSSClient对象并使用putObject方法将图片OSS,返回上成功的消息给前端。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值