使用layui的upload组件上传图片到七牛云

1.导入七牛云相关的依赖

<!--七牛云上传相关-->
    <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.14.9</version>
      <scope>compile</scope>
    </dependency>
    <dependency>
      <groupId>com.qiniu</groupId>
      <artifactId>happy-dns-java</artifactId>
      <version>0.1.4</version>
      <scope>compile</scope>
    </dependency>

2.七牛云配置

创建一个application.yml配置文件，将七牛云的配置放入其中：

QiNiu:
  accessKey: ***
  secretKey: ***
  bucket: ***
  url: ***

accessKey和 accessKey都是与七牛云密钥相关的，自己去七牛云的个人中心的密钥管理可以拿到。

bucket表示空间名，url是域名（创建七牛云创建实例空间会默认分配一个测试域名，有效期为30天时间）

3.后端代码

先创建一个类QiNiu

import lombok.Data;
@Data
public class QiNiu {
    private String token;
    private String key;
}

再创建上传图片的类 UploadQiNiu

import com.google.gson.Gson;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
import com.qiniu.util.StringMap;
import com.wdata.gen.qiniu.QiNiu;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.io.InputStream;
import java.util.*;

@RestController
@RequestMapping("/gen/uploadQiNiu")
@CrossOrigin(origins = "*",allowCredentials="true",allowedHeaders = "",methods = {})
public class UploadQiNiu {

    @Value("${QiNiu.accessKey}")
    private String accessKey;

    @Value("${QiNiu.secretKey}")
    private String secretKey;
    //空间名
    @Value("${QiNiu.bucket}")
    private String bucket;
    //域名路径
    @Value("${QiNiu.url}")
    private String url;

    //Zone.zone0:华东
    //Zone.zone1:华北
    //Zone.zone2:华南
    //Zone.zoneNa0:北美

    //获取 七牛云的token
    @RequestMapping(value = "/getToken", method = RequestMethod.GET)
    public QiNiu getToken() {
        QiNiu qiNiu = new QiNiu();
        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().replaceAll("\\-", ""));
        qiNiu.setToken(upToken);
        return qiNiu;
    };

    //保存图片到七牛云中
    @RequestMapping(value = "/upload",method = RequestMethod.POST)
    public Map<String, String> uploadQiNiu(@RequestParam("myFileName")MultipartFile myFileName) throws Exception{

        InputStream stream = myFileName.getInputStream();
        //构造一个带指定Zone对象的配置类
        Configuration cfg = new Configuration(Zone.zone1());//这里时区注意 华北：zon1()
        //...其他参数参考类注释
        UploadManager uploadManager = new UploadManager(cfg);
        //调用上面 获取 token 的方法
        QiNiu token = getToken();
        Response response = uploadManager.put(stream,token.getKey(),token.getToken(),null, null);
        //解析上传成功的结果
        DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
        //图片路径 这里使用的是七牛云的测试域名
        String urlQiNiu = url+token.getKey();
        HashMap<String, String> map = new HashMap<>();
        map.put("data",urlQiNiu);
        System.out.println("七牛云地址："+urlQiNiu);
        return map;
    }
}

4.前端代码

 <!--************这里是上传图片的代码***************-->
        <!--************这里添加的隐藏的输入框，用来传递images的参数***************-->
        <input type="hidden" name="imageUrl" class="image">
        <div class="layui-form-item">
            <label class="layui-form-label ">照片:</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="upload">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" width="100" height="100">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
        <!--************上面里是上传图片的代码***************-->

<script>
	 layui.use(['upload','table','form'],function(){
        var table = layui.table,
            upload=layui.upload,
            form = layui.form;
	 //普通图片上传
        var uploadInst = upload.render({
            elem: '#upload'
            ,url: '${pageContext.request.contextPath}/gen/uploadQiNiu/upload.do'
            ,accept:'images'
            ,field: 'myFileName'
            ,size:50000
            ,before: function(obj){
                obj.preview(function(index, file, result){
                    console.log(result)
                    $('#demo1').attr("src", result);
                });
            }
            ,done: function(res){
                //如果上传失败
                // if(res.code > 0){
                //     return layer.msg('上传失败');
                // }
                //上传成功
                var demoText = $('#demoText');
                demoText.html('<span style="color: #4cae4c;">上传成功</span>');

                var fileupload = $(".image");
                fileupload.attr("value",res.data);
                console.log(fileupload.attr("value"));
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
</script>

解释一下这些参数的意思：
elem: 指向容器选择器，如：elem: ‘#id’。也可以是DOM对象。这里我是用的是按钮。
url: 服务端上传接口。
**accept:**指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
field: 设定文件域的字段名（这里要和接口里的@RequestParam(“myFileName”)注解里的“myFileName对应”）