springboot将图片上传至七牛云服务器

我们在公司的业务开发中,经常会接触到图片上传功能,有很多小伙伴都会在这里遇坑,特别是将图片上传至七牛云服务器上,网上的很多讲解也都很不明确。那么今天我们就要来讲一讲如何将本地的图片上传至七牛云服务器上,配合步骤自己做一个小的demo吧!本文章很适合新手入门学习哦!

一.注册七牛云账号

首先我们需要申请一个七牛云账号,登录七牛云网站进行注册,注册成功后登录并进入管理控制台
进入控制台后点击左边的对象存储
点击进入后我们新建一个储存空间,具体的步骤就不多做赘述了,新建空间完成后,七牛云会给我们一个测试用的域名(我的是http://qnygr9tek.hd-bkt.clouddn.com/,记得需要完整路径包括http和/这些),只有30天的有效时间,30天后自动失效。这个测试域名就是后面的QiniuConfig.PATH,你也可以自定义域名(像我的就是http://sun1yue.cn/),在七牛云CDN里面将自己买的域名添加上去,会得到一个CNAME,然后打开自己域名运营商平台中域名解析中添加记录
主机记录 填写加速域名对应的主机前缀 该参数唯一,请勿自定义
记录类型 选择 CNAME 类型 该参数唯一,请勿自定义
线路类型 保持默认 该参数可以根据需求自行调整
记录值 域名创建后,七牛提供的 CNAME 该参数唯一,请勿自定义
TTL 保持默认 该参数可以根据需求自行调整
点击链接查看具体操作

注:主机是@,并且如果你以前解析有@的标识会发生冲突,将其他@删除就可以了

上诉配置好了就可以在七牛云中看到域名的状态成功了!

二.springboot整合七牛云sdk

七牛云的相关maven依赖到pom.xml中:

 <!--gsonJava序列化/反序列化-->
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.4</version>
        </dependency>
        <!-- 七牛云 -->
        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
            <version>[7.2.0, 7.2.99]</version>
        </dependency>

三.配置文件

然后我们在项目配置文件中编写我们七牛云的配置,我这里使用的是application.properties,使用application.yml的请自行调整,具体看图

#  七牛云
#设置需要操作的账号的AK和SK
QiniuConfig.AK=***
QiniuConfig.SK=***
# 要上传的空间名称
QiniuConfig.BUCKET=***
#外链默认域名
#QiniuConfig.PATH=http://***/

这里重点来了,说一下里面的配置内容,首先QiniuConfig.AK和iniuConfig.SK这两个内容可以在我们的七牛云账号中找到,路径为七牛云个人中心-》密钥管理。将里面的两个内容分别复制进去,QiniuConfig.BUCKET只是自己创建的空间名,外链默认域名是新建空间完成后,七牛云会给我们一个测试用的域名。

四.配置类

编写七牛云上传配置工具类

package com.sunyue.myblog;

import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.Region;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
import lombok.Data;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import java.io.FileInputStream;

@Data
@Component
@ConfigurationProperties(prefix = "qiniu")
public class QiNiuYunConfig {
    @Value("${QiniuConfig.AK}")
    private String accessKey;
    @Value("${QiniuConfig.SK}")
    private String secretKey;
    @Value("${QiniuConfig.BUCKET}")
    private String bucket;
    @Value("${QiniuConfig.PATH}")
    private String path;


    public String uploadImgToQiNiu(FileInputStream file, String filename) {
        // 构造一个带指定Zone对象的配置类,注意后面的zone各个地区不一样的
        Configuration config = new Configuration(Region.region0());
        //下记方法已弃用
        //Configuration cfg = new Configuration(Zone.zone0());
        // 其他参数参考类注释
        UploadManager uploadManager = new UploadManager(config);
        // 生成密钥
        Auth auth = Auth.create(accessKey, secretKey);
        try {
            String upToken = auth.uploadToken(bucket);
            try {
                Response response = uploadManager.put(file, filename, upToken, null, null);
                // 解析上传成功的结果
                DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);

                // 这个returnPath是获得到的外链地址,通过这个地址可以直接打开图片
                String returnPath = getPath() + "/" + putRet.key;
                //System.out.println(returnPath);
                return returnPath;
            } catch (QiniuException ex) {
                Response r = ex.response;
                System.err.println(r.toString());
                try {
                    System.err.println(r.bodyString());
                } catch (QiniuException ex2) {
                    //ignore
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "";
    }
}

五.控制层controller

package com.sunyue.myblog.controller;

import com.sunyue.myblog.QiNiuYunConfig;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.FileInputStream;
import java.io.IOException;

@Slf4j
@Controller
public class QiNiuController {

    @Autowired
    private QiNiuYunConfig qiNiuYunConfig;

    @GetMapping("/upload")
    public String upload(){
        return "test/upload";
    }

    @PostMapping("/qiniu")
    public String qiNiuYunUpload(@RequestParam("file")MultipartFile file,
                                 Model model) throws IOException {
        String filename = file.getOriginalFilename();
        FileInputStream inputStream = (FileInputStream) file.getInputStream();
        String link = qiNiuYunConfig.uploadImgToQiNiu(inputStream, filename);
        model.addAttribute("link", link);
        return "test/upload";
    }
}

六.前端页面返回上传到七牛云的图片显示

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
</head>
<body>
<form action="/qiniu" method="post" enctype="multipart/form-data">
    <label>上传图片</label>
    <input type="file" name="file"/>
    <input type="submit" value="上传"/>
    <p>回显图片:</p>
    <img th:src="${link}"/>
</form>
</body>
</html>

到此为止所有的上传图片的功能就结束了,不知道这篇文章有没有帮助到你呢?

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 首先,需要在七牛云上创建一个存储空间,并获取该存储空间的accessKey、secretKey、bucket和domain。 2. 在Springboot中引入七牛云的Java SDK,可以通过Maven或Gradle进行引入。例如,在Maven中添加以下依赖: ``` <dependency> <groupId>com.qiniu</groupId> <artifactId>qiniu-java-sdk</artifactId> <version>[7.2.0, 7.2.99]</version> </dependency> ``` 3. 创建一个七牛云的配置类,用于存储accessKey、secretKey、bucket和domain等配置信息。 ``` @Configuration public class QiniuConfig { @Value("${qiniu.accessKey}") private String accessKey; @Value("${qiniu.secretKey}") private String secretKey; @Value("${qiniu.bucket}") private String bucket; @Value("${qiniu.domain}") private String domain; @Bean public Auth auth() { return Auth.create(accessKey, secretKey); } @Bean public Configuration configuration() { return new Configuration(Zone.zone0()); } @Bean public UploadManager uploadManager() { return new UploadManager(configuration()); } @Bean public BucketManager bucketManager() { return new BucketManager(auth(), configuration()); } @Bean public StringMap putPolicy() { StringMap putPolicy = new StringMap(); putPolicy.put("returnBody", "{\"key\":\"$(key)\",\"hash\":\"$(etag)\",\"bucket\":\"$(bucket)\",\"name\":\"$(fname)\",\"size\":$(fsize)}"); return putPolicy; } @Bean public String uploadToken() { return auth().uploadToken(bucket, null, 3600, putPolicy()); } @Bean public String domain() { return domain; } } ``` 4. 在Vue中使用element-ui的上传组件,设置上传的接口为Springboot的接口。 ``` <el-upload class="upload-demo" action="/api/upload" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload" :headers="{Authorization: 'Bearer ' + token}" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> ``` 5. 在Springboot中编写上传接口,在该接口中使用七牛云的Java SDK进行上传。 ``` @RestController @RequestMapping("/api") public class UploadController { @Autowired private UploadManager uploadManager; @Autowired private String uploadToken; @Autowired private String domain; @PostMapping("/upload") public ResponseEntity<?> upload(@RequestParam("file") MultipartFile file) throws IOException { try { Response response = uploadManager.put(file.getBytes(), null, uploadToken); if (response.isOK()) { String key = JSON.parseObject(response.bodyString()).getString("key"); return ResponseEntity.ok(domain + "/" + key); } } catch (QiniuException e) { e.printStackTrace(); } return ResponseEntity.badRequest().build(); } } ``` 6. 程序运行后,在Vue中上传图片即可自动将图片上传七牛云,并返回图片的访问URL。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值