感谢

感谢何大神的帮忙。之前仅了解阿里云oss，没有接触过七牛云，正好身边有位大神，节约时间就是效率，该功能大神帮我实现的。

上传七牛云效果

上传七牛云.gif

变化的代码图

image.png

---

1：开通七牛云对象存储（免费哦）

省略。。。

2：导入七牛云jdk包

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

3：创建工具类

public class QiNiuUtil {

    public static final String accessKey = "GoNJS_M_需要看你七牛云的后台";
    public static final String secretKey = "7idgiYtHviockTDTjnYT-OU需要看你七牛云的后台";
    public static final String bucket = "wechat-task";

    public static String getNormalUploadToken(){
        Auth auth = Auth.create(accessKey, secretKey);
        return auth.uploadToken(bucket);
    }

}

4添加Controller七牛云获取token的参数

@RestController
@RequestMapping("upload")
public class UpLoadController {

    @RequestMapping(value = "getQiNiuUploadToken",method = RequestMethod.GET)
    public ResponseData getQiNiuUploadToken(){
        return ResponseData.success(QiNiuUtil.getNormalUploadToken());
    }

}

导入jquery.js 和qiniu-2.5.js

导入js

_header添加布局&js代码

        <li class="layui-nav-item" lay-unselect>
            <input type="file" onchange="change()" id="upload" />
        </li>

image.png

js

<script>
    function change(){
        console.log('文件选中');
        var f = document.getElementById("upload");

        var file = f.files[0];

        console.log(file);
        uploadImageFile(file, new Date().getTime());

    }

    function uploadImageFile(file, key) {
        let type = file.type;
        let indexOf = type.indexOf("/");
        let suf = "";
        if (indexOf !== -1){
            suf = "." + type.substring(indexOf + 1);
        }
        let fileName =  key + suf;
        console.log('上传的图片地址 ==> ' + fileName);


        $.ajax({
            url: Feng.ctxPath + "/upload/getQiNiuUploadToken",
            method: "GET",
            success: function(result){
                console.log('七牛云token结果 ==> ' + result)
                uploadQiNiu(result.data,file,fileName)
            }
        });


    };

    function uploadQiNiu(token,file,fileName){
        console.log('七牛云token ==> ' + token);

        let observable = qiniu.upload(file, fileName, token);
        let observer = {                         //设置上传过程的监听函数
            next(result) {                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
                console.log(result.total.percent);//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
            },
            error(err) {                          //失败后
                console.log("上传失败:" + err.message);
            },
            complete(res) {                       //成功后
                console.log('上传成功 ==> ' + JSON.stringify(res))
                alert('http://q349xx31l.bkt.clouddn.com/' + res.key)
            }
        };
        observable.subscribe(observer);

    }
</script>

image.png

index.html中导入js

<script type="text/javascript" src="${ctxPath}/assets/common/js/jquery-3.4.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/qiniu-2.5.js"></script>

Android端上传文件

android 集成七牛云sdk

image.png

七牛云每个测试域名自创建起30个自然日后系统会自动回收

如果绑定自定的域名

image.png 自定义域名设置

域名解析添加设置

这里我采用了阿里云上申请的域名

image.png image.png

解析的域名记录来自七牛云中

image.png

下载文件看看

http://qny.51wxfd.club/1588072917561.png