spring boot 图片随着表单一起提交 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>

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