Vue+Java上传图片文件到七牛云

执行完会自动加载到package.json

引入

// 这种是错误的！！！
import qiniu from 'qiniu-js'

// 这才是对的！
import * as qiniu from 'qiniu-js'

上传

七牛api

主要方法：qiniu.upload()

它的参数有：

file: 文件本体
key: 用文件名就行
token: 就是上面说到的后台从七牛云获取到的 token
putExtra: 看官方文档，我也用不到 https://developer.qiniu.com/kodo/1283/javascript
config: 看官方文档，我也用不到 https://developer.qiniu.com/kodo/1283/javascript

主要参数：file, key, token**代码如下：

const observer = {
    next(res){
        // 上传成功后
        console.log('next: ',res)
    },
    error(err){
        // 失败
        console.log(err)
    },
    complete(res){
        console.log('complete: ',res)
    }
}
// 1. 通过 .upload 方法获取到 observable 对象
const observable = qiniu.upload(uploadInfo.file, uploadInfo.file.name, res.data, {}, {})
// 2. observable.subscribe 触发上传，之后的回调方法都在 observer 对象中，对应着：成功、失败、完成方法
const subscription = observable.subscribe(observer) // 上传开始

// 3. 当然你也可以取消上传操作
// subscription.unsubscribe() // 上传取消

跟 element-ui 配合实现图片上传

<el-upload> 中的 http-request 是覆盖默认上传方式的方法，所以我们用它
在这里插入图片描述

接收的参数是这个 el-upload 对象本身，它的参数有：
在这里插入图片描述

看到了没有，那个 file 就是我们需要的东西。

完整代码

<el-upload
    action="files.kylebing.cn"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :http-request="uploadFile"
    :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
</el-upload>

// 上传方法
uploadFile(uploadInfo){

let fileName = md5(uploadInfo.file.name)+ '.' + uploadInfo.file.type.split('/')[1]  //图片用md5重新命名

      getQiNiuToken().then(res => {
        //console.log('Token:',res)
        // 上传文件
        const observer = {
          next(res) {
            // console.log('next...已上传大小，单位为字节：' + res.total.loaded)
            // console.log('next...本次上传的总量控制信息，单位为字节：' + res.total.size)
            console.log('next...当前上传进度，范围：0～100：' + res.total.percent)
          },
          error(err) {
            console.log(err)
          },
          complete(res) {
            //上传成功后触发。包含文件地址
            //上传成功以后会返回key 和 hash  key就是文件名了！
            console.log('上传图片完成:', res)
          }
        }

        const observable = qiniu.upload(uploadInfo.file, fileName, res, {}, {})
        const subscription = observable.subscribe(observer) // 上传开始
        // subscription.unsubscribe() // 上传取消
      })
        .catch(err => {
          this.$message.error('获取上传 token 失败')
        })


 },
// 图片删除
handleRemove(file, fileList) {
    console.log(file, fileList);
},

// 图片点击预览
handlePictureCardPreview(file){},

获取token的java代码：

    @GetMapping
    public String getToken() {
        KkQiNiu qiNiu = new KkQiNiu();
        String accessKey = "";
        String secretKey = "";
        String bucket = "";

        Auth auth = Auth.create(accessKey, secretKey);
        StringMap putPolicy = new StringMap();
        putPolicy.put("returnBody", "{\"key\":\"$(key)\",\"hash\":\"$(etag)\",\"bucket\":\"$(bucket)\",\"fsize\":$(fsize)}");
        long expireSeconds = 3600;
        String upToken = auth.uploadToken(bucket, null, expireSeconds, putPolicy);

        return upToken;
    }

Pom.xml

    <!--QiNiu Start -->
        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>qiniu-java-sdk</artifactId>
            <version>7.12.1</version>
        </dependency>
        <dependency>
            <groupId>com.squareup.okhttp3</groupId>
            <artifactId>okhttp</artifactId>
            <version>3.14.9</version>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.5</version>
        </dependency>
        <dependency>
            <groupId>com.qiniu</groupId>
            <artifactId>happy-dns-java</artifactId>
            <version>0.1.6</version>
        </dependency>


        <!--QiNiu end-->

‍