前端代码: 构建一个能够多选的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格式,点击看到图片即可。