多图上传至七牛云+本地查看缩略图；返回七牛云的URL

前端代码： 构建一个能够多选的input 类型file 注意写multiple="true"

<input id="uploadFile" name="uploadFile" type="file" multiple="true" accept=".jpg,.jpeg,.png"   />
    <div id='dd'></div>

这是循环代码：

原理就是通过一个循环，获取多个token

/*
 * 多图上传至七牛，循环获取token
 */
$(document).ready(function () {
    $("#uploadFile").change(function () {
        var fil = this.files;
        for (var i = 0; i < fil.length; i++) {
            reads(fil[i]);
        }
    });
});

把多图理解成单图即可：

多图上传至七牛案例步骤：
1-选取本地的多个图片
2-点击保存时，打印出文件base64 列表（多选几个打几个） 用FileReader实现
3-将这些传至后台，获取token和key，并循环上传至七牛
4-返回列表的url集合（对象）
5-丢给后台
6-后台解析表单
7-给两张表插入对应的数据

function reads(fil){
    var reader = new FileReader();
    reader.readAsDataURL(fil);
    reader.onload = function()
    {
            document.getElementById("dd").innerHTML += "<img src='"+reader.result+"'>";
            //图片的 base64 格式, 可以直接当成 img 的 src 属性值
            var imageData = reader.result;
            console.log(imageData)
            var key = ''
            key = (new Date()).valueOf() + '.jpg';
            console.log(key)
                $.ajax({
                    url : '/idear/token/get',//后台接口，改为你们的
                    type : 'post',
                    async : false,
                    data : {
                        "key" : key
                    },
                    success : function(data) {
                        var obj = JSON.parse(data);
                        token = obj.token;
                        console.log(data)
                        putb64(imageData, key, token);
                    }
                });
    };
    
}

这部分是核心关键，当后台返回了token后，进入这个函数，三个参数：第一个是你的图片base64格式的url

第二个是时间戳，即图片的uuid编码，第三个是服务器返回给你的token；

有了这三个参数，即可以上传到七牛！

注册七牛和获取domain测试我就不写了，很多教程。domain要改为自己域名或者是他送你的30天测试用的

//使用base64上传模式上传到七牛
function putb64(imageData, key, token) {
    // 获取base64编码后的图片字符串
    var imageData = imageData.substring(23);
    console.log(imageData)
    var picStr = imageData;
    //  计算base64编码前文件大小
    var picLength = getPicLength(imageData);
    // 这是七牛专门为base64上传模式提供的服务器url，指定key上传要进行base64加密
    var url = "http://upload.qiniup.com/putb64/" + picLength + "/key/" + window.btoa(key);
    //  这是你的七牛的空间域名
    var domain = "http://tea.memorier.cn/" //改为你们的domain
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {    // 监听上传响应
        if (xhr.readyState == 4) {                   // 上传成功
            var data = JSON.parse(xhr.responseText)     // 获取图片key
            var imgurl = domain + data.key
            console.log(imgurl)
        }
    }
    // 配置上传参数
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.setRequestHeader("Authorization", "UpToken " + token);    // 设置你的上传凭证，要从服务器获取
    xhr.send(picStr);   // 开始上传图片
}
//获取图片文件大小
function getPicLength(imageData) {
    var equalIndex = imageData.indexOf('=');
    if (imageData.indexOf('=') > 0) {
        imageData = imageData.substring(0, equalIndex);
    }
    var picLength = parseInt(imageData.length - (imageData.length / 8) * 2);
    return picLength;
}

 后台代码：

  主要就是上面的那个接口： url : '/idear/token/get',//后台接口，改为你们的

package com.tea.token;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import com.tea.utils.QiniuUtil;

public class Get extends HttpServlet {
	private static final long serialVersionUID = 1L;

	// 获得全部信息
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	// 获得所有信息
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		String key = request.getParameter("key");
		PrintWriter out = response.getWriter(); // 用PrintWriter对象将返回结果写入服务器
		Map<String, String> map = new HashMap<>();
		String token = QiniuUtil.getToken(key); 	// 生成普通上传的Token
		map.put("token", token);
		out.print(new Gson().toJson(map));
		out.flush();
		out.close();
	}
}

记得还要导入几个jar包：

还要共用类：accessKey secretKey bucket 都改为自己的

package com.young.utils;

import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.Configuration;
import com.qiniu.util.Auth;

public class QiniuUtil {

	// 在七牛注册后获得的accessKey和secretKey（改为自己的）
	private static String accessKey = "zeba3ad2N9lUFLBcCnOz_qBg5BB5a1DCNAFNWOA1";
	private static String secretKey = "cQ-XJMwESDy2AJZ4kmA1sVrWoYx0LC-W7u20dQ2R";
	private static String bucket = "tea"; // 七牛空间名（改为自己的）

	// 获取覆盖同名文件的上传凭证
	public static String getToken(String key) {
		Auth auth = Auth.create(accessKey, secretKey);
		String upToken = auth.uploadToken(bucket, key, 3600, null, true); // 生成覆盖相同key文件的上传Token
		return upToken;
	}

	// 删除七牛中指定key的文件
	public static void delFile(String key) {
		// 构造一个带指定Zone对象的配置类
		Configuration cfg = new Configuration(Zone.zone0());
		Auth auth = Auth.create(accessKey, secretKey);
		BucketManager bucketManager = new BucketManager(auth, cfg);
		try {
			bucketManager.delete(bucket, key);
		} catch (QiniuException ex) {
			// 如果遇到异常，说明删除失败
			System.err.println(ex.code());
			System.err.println(ex.response.toString());
		}
	}

}

运行结果实例：

 

多选图片，然后能够查看到多选的缩略图。

通过console看到，多个图片已经有七牛返回的多个url，接下来把这些url封装到数组丢给后台就可以插入到表中。

比较详细了，前后台都有，有这个需求的人也不是小白应该能看懂。

再说一遍，原理其实就是：将选取的本地图片转换成base64格式的，然后发请求 向服务器要token和生成独一的key，从七牛回来的数据成为URL格式，点击看到图片即可。