** 本文的上传模式是前端直传七牛oss模式，后端只负责提供token，避免泄露accessKey **

原文：

1.开通七牛OSS，创建bucket,并且实名认证，详细步骤自己看官网。

2.引入七牛Java SDK

    			
     
      com.qiniu
     			
     
      qiniu-java-sdk
     			
     
      [7.2.0, 7.2.99]
     		
    

3.引入七牛Java SDK ,提供前端获取token API

public void getToken(){        String host = PropKit.get("qiniuHost");        String accessKey = PropKit.get("qiniuAccessKey");        String secretKey = PropKit.get("qiniuSecretKey");        String bucket = PropKit.get("qiniuBucket");        Auth auth = Auth.create(accessKey, secretKey);        String token = auth.uploadToken(bucket);        renderJson(RetKit.ok("token", token).set("host",host));    }

4.Vue 安装七牛提供的sdk

npm install qiniu-js

5.Elment上传组件加入http-request参数，并且把action指向

6.编写上传JS，大体是上传的时候先向后台请求token,拿到token后调用七牛sdk直传。next 可以输出上传进度，complete上传完成。

uploadRequest: function(request) {      getToken().then(res => {        let token = res.token;        let host = res.host;        upload(          token,          request,          next => {            let total = next.total;            console.log(total);          },          error => {            console.log(error)          },          complete => {            let hash = complete.hash;            let key = complete.key;            this.form.url = host + "/" + key;            console.log(hash);            console.log(key);          }        )});handleAvatarSuccess(res, file) {      this.imageUrl = URL.createObjectURL(file.raw);},beforeAvatarUpload(file) {      const isLt2M = file.size / 1024 / 1024 < 2;      if (!isLt2M) {        this.$message.error("上传头像图片大小不能超过 2MB!");      }      return isLt2M;}

import * as qiniu from 'qiniu-js'// token 找后端，obj 这里指代从 el-upload 接收到的 objectexport const upload = (token, obj,next,error,complete) => {    const {        file    } = obj    // 关于 key 要怎么处理自行解决，但如果为 undefined 或者 null 会使用上传后的 hash 作为 key.    const key = formatDate(new Date(),"yyyyMMddhhmmss") + getRandomInt(1000, 9999)    // 因人而异，自行解决    const putExtra = {            fname: "",            params: {},            mimeType: [] || null        },        //       fname: string，文件原文件名        // params: object，用来放置自定义变量        // mimeType: null || array，用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]        config = {            useCdnDomain: true,            region: qiniu.region.z2        }    let options = {        quality: 0.92,        noCompressIfLarger: true,        maxWidth: 1000,        maxHeight: 618    }    qiniu.compressImage(file, options).then(data => {        // 调用sdk上传接口获得相应的observable，控制上传和暂停        let observable = qiniu.upload(data.dist, key, token, putExtra, config);        let subscription = observable.subscribe(next,error,complete);        return subscription    }).catch(res => {        console.log(res)        return res    })}