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

前言

关于云存储的文件上传,我想说的真的挺多的,这是一篇纯原创的基于小程序 或者是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 
                          },

总结

这里提醒一下,如果你在获取token时,bucket或者key的值写错了,依然能够返回token,只是校验时会出错。
如果你觉得这篇文章对你有帮助的话,请帮忙点个赞吧!

更多文件上传下载 文件上传下载
这里附带上我的微信小程序开源项目:
项目地址:https://github.com/CaseOfShe/school
演示地址:https://www.bilibili.com/video/BV1q3411g71P

猜你喜欢

转载自blog.csdn.net/weixin_53690059/article/details/124761687