Vue上传文件/图片到七牛云

客官°小女子只卖身不卖艺 2022-05-09 05:56 500阅读 0赞

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

说明：

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

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

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

## 第一步：前台  ##

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

**2、main.js 配置**

**![20191026163048829.png][]**

**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;
        };

[20191026163048829.png]: /images/20220509/923d3c76b2de448196c18fb724d64964.png