目的：使用 vue 上传文件/图片 到七牛云

说明：

     1、前台使用vue，后台用 java 传递一个 token。

     2、token ： 这个相当于一个密钥。

    3、简单点说。就不写什么去注册账号，找到 as he ks 啥的，都到这一步，这些都不用说了。

第一步：前台 

    1、安装 cnpm install qiniu-js /  npm install qiniu-js

    2、main.js 配置

 

   3、使用

releaseBlog() {     //发布博客
              

                var qiniu = require('qiniu-js')
                var config = {
                    useCdnDomain: true,
                    region: qiniu.region.z0,     //华东
                };
                var putExtra = {
                    fname: "",
                    params: {},
                    mimeType: [] || null 
                };
                var observer = {
                    next(res){
                        // ...
                    },
                    error(err){
                        // ...
                    }, 
                    complete(res){
                        // ...
                    }
                }
               
                var url1 = this.$store.state.frontUrl + "/getToken"
                this.$ajax.get(url1)
                .then( response => {
                    
                    //获取 token 和 图片的名称
                    this.token = response.data.token;
                    this.key = response.data.key;


                    //把图片上传到 七牛云
                    var observable = qiniu.upload(this.$refs.file.files[0], this.key, this.token , putExtra, config)
                    var subscription = observable.subscribe(observer) // 上传开始


                    //把数据保存到 后台
                    var url2 = this.$store.state.frontUrl + "/saveBlog"
                    this.$ajax.post(url2,JSON.stringify(this.inputBlog))
                    .then( response => {
                       
                    })

                })

            },

这里做两点说明：

    1、获取token：很明显，我的第一个 ajax 就是，去后台获取 token 的。后面会给出后台 制作 token的代码。

    2、获取上传的文件数据：

    2、获取上传的文件数据：

<input type="file" ref="file" accept="image/*" >
this.$refs.file.files[0]

第二步：后台

2-1：maven 依赖

<dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
            <version>7.2.11</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.squareup.okhttp3</groupId>
            <artifactId>okhttp</artifactId>
            <version>3.3.1</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.6.2</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>happy-dns-java</artifactId>
            <version>0.1.4</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>

2-2：java代码

@RequestMapping(value = "/getToken", method = RequestMethod.GET)
    public QiNiu getToken() {
        QiNiu qiNiu = new QiNiu();
        // 这三个 就是  ak  sk   和你的 空间名
        String accessKey = "";
        String secretKey = "";
        String bucket = "";
        long expireSeconds = 600;
        StringMap putPolicy = new StringMap();
        Auth auth = Auth.create(accessKey, secretKey);
        String upToken = auth.uploadToken(bucket,null, expireSeconds,putPolicy);

        qiNiu.setKey(UUID.randomUUID().toString());
        qiNiu.setToken(upToken);

      return qiNiu;
    };