第一步：引入js

引入qiniu.min.js

第二步：后台接口

后台获取token接口

@RequestMapping(value = "/upToken", method = RequestMethod.POST)
public String getUpToken(String suffix) {
        JSONObject jsonObject = new JSONObject();
        String randomFileName = UUID.randomUUID().toString() + suffix;
        jsonObject.put("imgUrl", randomFileName);
        jsonObject.put("upToken", qiniuService.getUpToken());
        jsonObject.put("domain", qiniuService.getDomain());

        return ok(jsonObject);
    }

package com.hnluchuan.quanke.service;

import com.alibaba.fastjson.JSONObject;
import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import java.io.IOException;
import java.util.UUID;

@Service
public class QiniuService {
  private static Logger logger = LoggerFactory.getLogger(QiniuService.class);

  @Value(value = "${qiniu.ak}")
  private String ak;
  @Value(value = "${qiniu.sk}")
  private String sk;
  @Value(value = "${qiniu.domain}")
  private String domain;
  @Value(value = "${qiniu.bucket}")
  private String bucket;

  private String imageSuffix = "gif,jpg,jpeg,bmp,png";

  public String upload(byte[] data) {
      return upload(data, null);
  }

  public String upload(byte[] data, String originalFilename) {
      Auth auth = Auth.create(ak, sk);

      // 简单上传，使用默认策略
      // private String getUpToken0(){
      Configuration configuration = new Configuration(Zone.zone2());
      UploadManager uploadManager = new UploadManager(configuration);

      String key = originalFilename;
      if (StringUtils.isBlank(key)) {
          key = UUID.randomUUID().toString();
      } else {
          key = UUID.randomUUID().toString();
          if (originalFilename.lastIndexOf(".") != -1) {
              key += originalFilename.substring(originalFilename.lastIndexOf("."));
          }
      }
      String upToken = auth.uploadToken(bucket, key);
      try {
          Response res = uploadManager.put(data, key, upToken);

          JSONObject json = JSONObject.parseObject(res.bodyString());
          String fileName = json.getString("key");
          String url = "http://" + domain + "/" + fileName;
          return url;
      } catch (QiniuException e) {
          logger.error(e.getMessage(), e);
          Response r = e.response;
          try {
              // 响应的文本信息
              logger.error(r.bodyString());
          } catch (QiniuException e1) {
              // ignore
          }
      } catch (IOException e) {
          e.printStackTrace();
      }
      return null;
  }

  /**
   * 获取下载文件路径，即：donwloadUrl
   * @return
   */
  public String getDownloadUrl(String targetUrl) {
      Auth auth = Auth.create(ak, sk);
      String downloadUrl = auth.privateDownloadUrl(targetUrl);
      return downloadUrl;
  }

  public String getUpToken() {
      Auth auth = Auth.create(ak, sk);
      return auth.uploadToken(bucket);
  }

  public String getDomain() {
      return domain;
  }

  public class MyRet {
      public long fsize;
      public String key;
      public String hash;
      public int width;
      public int height;
  }
}

第三步：js上传七牛

js文件

function upload(file, $url, $input) {
   var image = [];
   if (file.length <= 0) {
       return;
   }
   var fileName = file.name;
   var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length);//后缀名
   var fd = new FormData();
   fd.append("suffix", suffix);
   showLoading();
   $.ajax({
       url: "/qiniu/upToken",
       type: "POST",
       processData: false,
       contentType: false,
       data: fd,
       async: false,
       success: function (data) {
           data = JSON.parse(data);
           if (data.success) {
               var observer = {                         //设置上传过程的监听函数
                   next(result) {                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
                       // Math.floor(result.total.percent);//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
                   },
                   error(err) {                          //失败后
                       alert(err.message);
                       hideLoading();
                   },
                   complete(res) {                       //成功后
                       // ?imageView2/2/h/100：展示缩略图，不加显示原图
                       // ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高
                       // $("#image").attr("src",result.domain+result.imgUrl+"?imageView2/2/w/400/h/400/q/100");
                       if ($url) {
                           $url.attr("src", "http://" + data.data.domain + "/" + data.data.imgUrl);
                       }
                       if ($input) {
                           $input.val("http://" + data.data.domain + "/" + data.data.imgUrl);
                       }
                       hideLoading();
                   }
               };
               var putExtra = {
                   fname: fileName,                          //原文件名
                   params: {},                         //用来放置自定义变量
                   mimeType: ["image/gif", "image/png", "image/jpeg" ,"image/jpg", "image/bmp"] || null                      //限制上传文件类型
               };
               var config = {
                   region: qiniu.region.z2,             //存储区域(z0:代表华东;z2:代表华南,不写默认自动识别)
                   concurrentRequestLimit: 3            //分片上传的并发请求量
               };
               var observable = qiniu.upload(file, data.data.imgUrl, data.data.upToken, putExtra, config);
               var subscription = observable.subscribe(observer);          // 上传开始
               // 取消上传
               // subscription.unsubscribe();
           }
           image.url = "http://" + data.data.domain + "/" + data.data.imgUrl;
           image.name = fileName;
       },
       error: function () {
           hideLoading();
       }
   });
   return image;
}

第四步：调用及返回

$('#file').change(function () {
        if (this.files.length <= 0) {
            return;
        }
        var file = this.files[0];
        var image = upload(file, null, $('#license'));
        $('#license-name').val(image.name);
        $('#license-url').val(image.url);
    })