Purpose: upload files / pictures to qiniu cloud using vue

Explain:

1. The foreground uses vue and the background uses java to pass a token.

2. token: This is equivalent to a key.

3. Simply put it. Don't write anything to sign up for an account, find as he ks or anything, and go to this step, needless to say.

Step 1: front desk

1. Install cnpm install qiniu JS / NPM install qiniu JS

2. main.js configuration

3. Use

            releaseBlog() {     //Publish blog
              

                var qiniu = require('qiniu-js')
                var config = {
                    useCdnDomain: true,
                    region: qiniu.region.z0,     //East China
                };
                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 => {
                    
                    //Get the name of token and picture
                    this.token = response.data.token;
                    this.key = response.data.key;


                    //Upload the picture to qiniu cloud
                    var observable = qiniu.upload(this.$refs.file.files[0], this.key, this.token , putExtra, config)
                    var subscription = observable.subscribe(observer) // Upload start


                    //Save data to the background
                    var url2 = this.$store.state.frontUrl + "/saveBlog"
                    this.$ajax.post(url2,JSON.stringify(this.inputBlog))
                    .then( response => {
                       
                    })

                })

            },

Here are two notes:

1. Get token: obviously, my first ajax is to get token in the background. The code for making token in the background will be shown later.

2. Get the uploaded file data:

<input type="file" ref="file" accept="image/*" >

this.$refs.file.files[0]

Step 2: Backstage

2-1: maven dependency

<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 code

 @RequestMapping(value = "/getToken", method = RequestMethod.GET)
    public QiNiu getToken() {
        QiNiu qiNiu = new QiNiu();
        // These three are AK SK and your space name
        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;
    };