微信小程序图片上传到java后台

超级细的云存储功能介绍与实现！

Xsed

1362人浏览 · 2022-05-14 00:32:33

Xsed · 2022-05-14 00:32:33 发布

前言

关于云存储的文件上传，我想说的真的挺多的，这是一篇纯原创的基于小程序或者是SpringBoot的云存储的全过程。
整篇教学很细很细，适合于所有的java学习者，特别是刚刚结束学习java想要练手的同学。

关于我对云存储的使用与理解！

云存储，顾名思义就是将我们的文件（在这里我泛指图片，视频，当然也可以有其他的文件类型）存在云端的服务器里，在云端的服务器中，通过算法将我们的图片进行压缩并保存在他们的服务器里，并以连接地址的形式返回给我们。
在这里，我想到使用云存储是因为自己在写专业综合项目的时候，因为不知道怎么处理图片而引发的。恰巧碰到了这一个问题，我也是第一次接触不通过网页进行的文件处理，所以当时自己也是一脸懵逼，但能肯定的是，我一定会用到文件上传和下载。这时我还没有直接去写文件上传下载，当时的我并不知道如何通过小程序进行文件上传下载，我也不想直接把我的文件存在我的服务器里，因为这样会浪费我的服务器空间。在这之前我写过一个自己的博客，当时我有很多的图片就是存在我的服务器里，图片没有进行压缩，图片也很大，在访问博客时，很多图片同时加载，如果没有缓存的话，加载特别慢，并且连我的某些css也是加载不出来。所以这点让我很不理解。所以我有了一个大胆的想法，图床我第一次接触图床的时候就是在我写博客的时候，因为有大量的图片需要我从数据库中拿出来，所以我找到了图床这一个方法，他非常的好用，他以一个连接的形式将我的图片存进去，只要访问地址，就能拿到我的图片，正好前端也契合，所以最初的我想直接通过文件上传与下载将文件从小程序端（前端）传到后台，再将文件上传到图床网站，对图床网站进行请求。这是一个想法，我没有去证实他，但我猜测是可行的，因为图床返回的也是地址，在这时，我被迫了解到了云存储。
图床的本质其实和云存储是一样的！图床是上传图片返回地址，云存储也是！

本文详细介绍了云存储最基础的使用和实现方法。

提示：以下代码仅供参考

一、云存储是什么？

简单理解：就是将文件传入云端服务器，返回给你访问地址。

二、为什么使用云存储

1.我的理解

例如有用户传输文件给我，我如何处理这个文件？是将文件直接保存到本地，利用本地路径存储到数据库，等到前端需要展示时再通过其文件路径将文件展示出来吗？这是可以行的，但我认为，将工程和数据存储在一个服务器上是不合理的行为，这样能够减轻工程服务器压力，并且在使用时，本地服务器存储的图片是没有进行压缩的，如果服务器系统出现错误，容易出现数据出错或者丢失，并且大大减少了工程的可扩展性。在最初的我只是觉得以这种方式存储，在拿去文件的时候十分麻烦，并且不易存储。因为我存储图片都是以图床的形式去存储。
于是就有了云存储。

2.什么是云存储，为什么要使用云存储？好处？

我的理解：在我查阅了资料过后，云存储其实也是服务器存储数据，云存储就是将数据放在云端。当然毕竟是在别人公司的服务器里，相对来说不是绝对安全的，但对于我们学习和开发使用，我觉得是非常不错的。
在这里，我们将文件类的大型数据放在云存储里，减少了我们工程服务器的压力，并且云存储会将图片进行压缩，将图片放在云端，以图床形式返回给我们。
最重要的是，他以图床的形式返回给我们，能以更方便的形式存储在数据库中。
就是专门用来存放图片，同时允许你把图片对外连接的网上空间，实际上是一个链接，访问连接得到图片。
比如：
http://baidu.com/6plmqdj5bcr

三、使用云存储

1.创建云存储账户

阿里云，腾讯云，华为云都可以，这里我以七牛云举例！
七牛云注册=> 在这里插入图片描述
=>
创建后，会提示你绑定自己的域名空间，这里是可以忽略的

如果自己有备案过的域名，那么就将自己备案后的域名填上即可，如果没有自己的备案域名，就使用自己的测试域名即可

存储空间名称：唯一且不可重复
存储区域：可选默认
访问控制：选择公开

2.在云存储空间内上传文件

点进自己的空间管理，点击文件上传，选择自己要上传的文件
在这里插入图片描述
上传成功后

点击详情

访问我们的链接地址，就能打开我们上传的图片辣！

四、如何利用java实现云存储功能

1.token

什么是token：通过请求云存储服务端，返回给你的一个base64加密数据，这是java上传文件到云存储空间的凭证，例如你的账号+密码
这里的http请求不需要我们利用RestTemplate进行请求，而是七牛云或者是阿里云服务端给我们自主提供了SDK（软件开发工具包）里面有他们自带的http请求方式。

导入七牛云SDK

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

七牛云JavaSDK文档：https://developer.qiniu.com/linking/6279/linking-java-sdk

利用Java对七牛云存储获取token接口

了解参数：
accessKey secretKey bucket
accessKey secretKey 你的七牛云账户密钥，作为你是七牛云用户的唯一凭证
在这里插入图片描述
bucket 就是你的空间名：

我们要获取token，首先要获取这三个参数，上传的流程
在这里插入图片描述

实体类：

@Data
public class QiNiu {
    private String token;
    private String key;
}

获取TOKEN

QiNiu qiNiu = new QiNiu();


    // 获取 七牛云的 token
    @RequestMapping(value = "/getToken", method = RequestMethod.GET)
    public String getToken() {
        String accessKey = "自己的accessKey";
        String secretKey = "自己的secretKey";
        String bucket = "自己的空间名";
        long expireSeconds = 600;   //过期时间
        StringMap putPolicy = new StringMap();
        //auth是七牛SDK封装的类，我们需要将我们的唯一标识符传进去
        Auth auth = Auth.create(accessKey, secretKey);
        //这里的第二个参数是key 而在请求时，内部已经有指定key了 要么这里写指定key 要么为null
        String upToken = auth.uploadToken(bucket,null,expireSeconds,putPolicy);
        qiNiu.setKey(UUID.randomUUID().toString().replaceAll("\\-", ""));
        qiNiu.setToken(upToken);
        return qiNiu.getToken();
    }

上传至云存储空间

@GetMapping(value = "/qiniu/upload")
    public Result UpLoad(){
        Result result = new Result();
        Configuration cfg = new Configuration(Region.huanan());//Region.huanan()对应自己的存储区域 默认为region
        UploadManager uploadManager = new UploadManager(cfg);
        String token=qiNiu.getToken();
        String key=qiNiu.getKey();
        String url="";//这里是你的域名地址 测试域名或者是备案域名
        String filePath="你电脑的图片地址";
        try {
        	//这里的key 就是我们刚刚用uuid随机生成的，意味着将文件名重置，避免重复
            Response response = uploadManager.put(filePath,key,token);
            DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
            System.out.println(putRet.key);
            //返回的key 就是我们的文件名
            System.out.println(putRet.hash);
            String imageUrl=url+putRet.key;
            result.setData(imageUrl);
            return result;
        } catch (QiniuException e) {
            e.printStackTrace();
            result.setMessage("err");
            return result;
        }
    }

这里补充一点，如果你是从前端传过来的文件，可以直接将文件以流的形式进行上传与下载，这样就只会缓存在你的java后台，而不会存储在你的服务器里了！

2.如何使用小程序端前后分离进行上传

流程图

在这里插入图片描述

代码

 wx.request({
                url: 'xxxxxx/getToken',
                method: 'GET',
                header: {
                  'Content-Type': 'application/x-www-form-urlencoded',
                },
                success:function(res){
                  token = res.data;
                  wx.uploadFile({
                    url:'你空间所在对应的上传区域地址',
                    //详情地址可见官网
                    filePath: fileName,//你的文件
                    name: 'file',//文件类型
                    formData:{
                      'token':token,//java返回给你的token
                      'key':key //可以用random函数生成随机key
                    },
                    success(res) {
                        var data=res.data;//返回的hash和key
                        if(typeof data==='string')data = JSON.parse(data.trim());//解压缩
                        url= '你的测试域名或者你的备案域名' + data.key,
                        that.setData({
                          url:url
                        })
                        wx.request({
                          url: '你的图片返回请求',
                          method: 'POST',
                          header: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                          },
                          data:{
                          url:url 
                          },