=============
后端_上传图片
=============

1 为什么要上传图片？

Markdown中的图片如下所示：

![image-20220402121530500](C:/Users/Administrator/Pictures/image-20220402121530500.png)

如此形式图片信息，其中使用的是本地图片文件的存储路径。这样的图片无法在浏览器中显式。

前端可以借助Markdown编辑器的图片上传功能先将图片上传到服务器，再在文档中引用服务器上的图片。

 _____________________________________
| B | I | H | U | S | ... | ^ |  ...  |
|-------------------------------------|
|                         | ...     | |
|                         | 图片上传| |
|                         |_________| |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|_____________________________________|

2 图片上传到哪里？

     __________       __________
    |应用服务器|图片 |          |
    |  YSDBLOG |---->|图片服务器|
    |__________|     |__________|
        ^  ^    \________   |
Markdown|  |图片 Markdown|  |图片
     ___|__|___       ___v__v___
    |          |     |          |
    |  浏览器  |     |  浏览器  |
    |__________|     |__________|

图片服务器选用免费的七牛云服务器。

3 七牛云

3.1 创建存储空间

https://www.qiniu.com/
    注册/登录(13552654195/qgahome1974523_Mw)
        存储空间
            新建空间
                存储空间名称：ysdblog
                    测试域名：r9pf5g3xy.hb-bkt.clouddn.com
    个人中心
        密钥管理
            AK：QlER5nOExJbt8KP4_hMrBXjmDI29YfCDz_bb71ki
            SK：jBqgFA9AgGa466Pan76Dl6EdFzc7Kyopa9rpEH6P

3.2 添加依赖

/pom.xml：

<dependency>
  <groupId>com.qiniu</groupId>
  <artifactId>qiniu-java-sdk</artifactId>
  <version>[7.7.0, 7.7.99]</version>
</dependency>

/ysdblog-api/pom.xml：

<dependency>
    <groupId>com.qiniu</groupId>
    <artifactId>qiniu-java-sdk</artifactId>
</dependency>

3.3 创建工具类

/ysdblog-api/src/main/java/com/weihome/ysdblog/utils/QiniuUtils.java：

@Component
public class QiniuUtils {
    public static final String url = "r9pf5g3xy.hb-bkt.clouddn.com";

    private static final String accessKey =
        "QlER5nOExJbt8KP4_hMrBXjmDI29YfCDz_bb71ki";
    private static final String secretKey =
        "jBqgFA9AgGa466Pan76Dl6EdFzc7Kyopa9rpEH6P";
    private static final String bucket = "ysdblog";

    public boolean upload(
        MultipartFile multipartFile, String filename) {
        Configuration configuration = new Configuration(Region.huabei());
        UploadManager uploadManager = new UploadManager(configuration);
        try {
            byte[] bytes = multipartFile.getBytes();
            Auth auth = Auth.create(accessKey, secretKey);
            String token = auth.uploadToken(bucket);
            uploadManager.put(bytes, filename, token);
        }
        catch (Exception e) {
            e.printStackTrace();
            return false;
        }
        return true;
    }
}

4 图片控制器

/ysdblog-api/src/main/java/com/weihome/ysdblog/controller/PictureController.java：

@RestController
@RequestMapping("picture")
public class PictureController {
    @Autowired
    private QiniuUtils qiniuUtils;

    @PostMapping("upload")
    public Result upload(
        @RequestParam("image") MultipartFile multipartFile) {
        // 来自客户端的原始文件名
        String filename = multipartFile.getOriginalFilename();
        // 由UUID和原始文件名中的扩展名组合而成的服务器使用的文件名
        filename = UUID.randomUUID().toString() + "." +
            StringUtils.substringAfterLast(filename, ".");

        // 上传文件到七牛云服务器
        if (!qiniuUtils.upload(multipartFile, filename))
            return Result.fail(
                ErrorCode.UPLOAD_ERROR.getCode(),
                ErrorCode.UPLOAD_ERROR.getMsg());

        return Result.success(QiniuUtils.url + filename);
    }
}

5 添加配置

Spring默认上传文件不能超过1M字节，如果上传的图片比较大，需要显式配置。

/ysdblog-api/src/main/resources/application.properties：

...
# 所有上传(图片)文件的字节数之和不能超过
spring.servlet.multipart.max-request-size=100MB
# 每个上传(图片)文件的字节数不能超过
spring.servlet.multipart.max-file-size=10MB
...

6 运行测试

Postman
    POST
        localhost:8888/picture/upload
    Body
        form-data
            image(file): IMG_4348.JPG
-------------------------------------
{
    "success": true,
    "code": 200,
    "msg": "success",
    "data": "r9pf5g3xy.hb-bkt.clouddn.com/89f36958-c0ed-42f6-bbfe-3cfaa76fa272.JPG"
}

浏览器打开：

http://r9pf5g3xy.hb-bkt.clouddn.com/89f36958-c0ed-42f6-bbfe-3cfaa76fa272.JPG

欣赏英俊的我。。。