引入七牛云js上传
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了引入七牛云js上传相关的知识，希望对你有一定的参考价值。
云存储有很多种方式，这里介绍前端页面直接通过js上传的方式，应为这种方式页面友好，对浏览器压力也小
云存储也有很多好处：
1、释放服务器磁盘空间
2、减轻服务器磁盘IO压力
3、减轻服务器带宽压力
4、服务器故障无影响
遇到的坑：
1、bad uptoken
2、error:incorrect zone, please use up-z2.qiniu.com
3、怎样获取文件名
4、怎样设置上传路径
5、怎样获取外部链接
6、怎样获取上传进度
bad uptoken：
在官方文档里面，七牛要求服务器返回uptoken格式为
{
"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
}
但是这很模糊，试了几次都提示bad token，最终在uploader的uptoken里应该直接写入字符串格式，如果是服务器返回的的uptoken请去掉两端的双引号，否则报错
function getTokenMessage() {
var token;
$.ajax({
url:"http://localhost:8080/LRVideo/appservice/basic/getJSUpToken",
async:false,
success:function (data) {
token = data;
}
})
return token;
}
var token = getTokenMessage();
uptoken = token.substring(token.indexOf("\\"")+1,token.lastIndexOf("\\""));
error:incorrect zone, please use up-z2.qiniu.com：
七牛官方js默认上传地区为华东地区，如果不是华东的则需要修改官方js
怎样获取文件名
‘Key‘: function(up, file) {
// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
// 该配置必须要在unique_names: false，save_key: false时才生效
var Date = getNowFormatDate();
var fileName = file.name;
console.log("filename" + file.name);
return key
}
怎样设置上传路径：
function getNowFormatDate() {
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth() + 1;
var day = myDate.getDate();
var hour = myDate.getHours();
var min = myDate.getMinutes();
var second = myDate.getSeconds();
if (month >= 0 && month <= 9) {
month = "0" + month;
}
if (day >= 0 && day <= 9) {
day = "0" + day;
}
if (hour >= 0 && hour <= 9) {
hour = "0" + hour;
}
if (min >= 0 && min <= 9) {
min = "0" + min;
}
if (second >= 0 && second <= 9) {
second = "0" + second;
}
var currentdate = year + "/" + month + "/" + day + "/" + hour + "/" + min + "/" + second;
return currentdate;
}
‘Key‘: function(up, file) {
// 若想在前端对每个文件的key进行个性化处理，可以配置该函数
// 该配置必须要在unique_names: false，save_key: false时才生效
var Date = getNowFormatDate();
var fileName = file.name;
var key = getNowFormatDate() + "/" + file.name;
// do something with key here
return key
}
怎样获取外部链接：
这里首先需要将uploader的domain设置一下：
domain: ‘http://onsoxm2o9.bkt.clouddn.com‘, // bucket域名，下载资源时用到，必需
请参照该存储空间的外链默认域名，可自行修改
‘FileUploaded‘: function(up, file, info) {
// 每个文件上传成功后，处理相关的事情
// 其中info是文件上传成功后，服务端返回的json，形式如：
// {
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
// }
// 查看简单反馈
var domain = up.getOption(‘domain‘);
var res = JSON.parse(info);
sourceLink = domain +"/"+ res.key; //获取上传成功后的文件的Url
console.log("sourceLink：" + sourceLink);
},
怎样获取上传进度：
‘UploadProgress‘: function(up, file) {
var progress = new FileProgress(file, ‘fsUploadProgress‘);
var chunk_size = plupload.parseSize(this.getOption(‘chunk_size‘));
progress.setProgress(file.percent + "%", file.speed, chunk_size);
console.log("Progress：" + file.percent + "%");
},
这里用到了new FileProgress函数，需要引入官方文档demo里的ui.js文件
QiniuUtils
package com.utils.qiniu;
import java.io.IOException;
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 com.qiniu.util.StringMap;
/**
* 七牛上传工具
*
*/
public class QiniuUtils {
//设置好账号的ACCESS_KEY和SECRET_KEY
String ACCESS_KEY = "EybSUWG7TpxDnHze3FeYG5Dk9YzceUnITeAUIkQH";
String SECRET_KEY = "IcyUqBR2Jm5oAoeAkeMNN_hG4IRclDkRL0TMYGdv";
//要上传的空间
String bucketname = "cczb";
String bucketname2 = "cczb-video";
//密钥配置
Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
///////////////////////指定上传的Zone的信息//////////////////
//第一种方式: 指定具体的要上传的zone
//注：该具体指定的方式和以下自动识别的方式选择其一即可
//要上传的空间(bucket)的存储区域为华东时
// Zone z = Zone.zone0();
//要上传的空间(bucket)的存储区域为华北时
// Zone z = Zone.zone1();
//要上传的空间(bucket)的存储区域为华南时
//Zone z = Zone.zone2();
//第二种方式: 自动识别要上传的空间(bucket)的存储区域是华东、华北、华南。
Zone z = Zone.autoZone();
Configuration c = new Configuration(z);
//创建上传对象
UploadManager uploadManager = new UploadManager(c);
//简单上传，使用默认策略，只需要设置上传的空间名就可以了
public String getUpToken() {
return auth.uploadToken(bucketname);
}
//js上传
//scope通过 bucket、key间接设置，deadline 通过 expires 间接设置
public String getJSUpToken() {
return auth.uploadToken(bucketname2);
}
public static void main(String[] args) {
StringMap policy = new StringMap().put("deadline", 1491159381).put("saveKey", "qiangge.jpg");
Auth auth = Auth.create("EybSUWG7TpxDnHze3FeYG5Dk9YzceUnITeAUIkQH", "IcyUqBR2Jm5oAoeAkeMNN_hG4IRclDkRL0TMYGdv");
System.err.println(auth.uploadToken("cczb-video:aaaaaaaa.jpg", "qiange2.jpg", 3600, policy));
}
/**
* 上传文件
* @author WangQiang 2017年2月10日 下午1:09:00
* @version 出彩V直播2.0
* @param FilePath 上传文件的真实路径
* @param key 上传到七牛后保存的文件名（可以包含路径），如 /test/test.png
* @return
*/
public boolean uploadFIle(String FilePath ,String key){
boolean flag = false;
try {
//调用put方法上传
Response res = uploadManager.put(FilePath, key, getUpToken());
//上传成功
if(res.statusCode == 200){
flag = true;
System.out.println("七牛上传文件成功：" + res.bodyString());
}else{
flag = false;
System.out.println("七牛上传文件失败（七牛原因或者七牛的配置原因）：" + res.bodyString());
}
} catch (QiniuException e) {
Response r = e.response;
// 请求失败时打印的异常的信息
System.out.println("七牛上传文件失败（自己原因）：" + r.toString());
try {
//响应的文本信息
System.out.println(r.bodyString());
} catch (QiniuException e1) {
//ignore
}
}
return flag;
}
//上传测试
public void uploadTest(String FilePath , String key) throws IOException {
try {
//调用put方法上传
Response res = uploadManager.put(FilePath, key, getUpToken());
//打印返回的信息
System.out.println(res.bodyString());
System.out.println(res.statusCode);
// System.out.println(res.toString());
if(res.statusCode == 200){
System.out.println("上传成功");
}else {
System.out.println("上传失败：" + res.bodyString());
}
} catch (QiniuException e) {
Response r = e.response;
// 请求失败时打印的异常的信息
System.out.println(r.toString());
try {
//响应的文本信息
System.out.println(r.bodyString());
} catch (QiniuException e1) {
//ignore
}
}
}
}
获取uptoken
@RequestMapping(value = "/uploadFile")
@ResponseBody
public Object uploadFile(HttpServletRequest request, HttpServletResponse response,
@RequestParam(value = "file", required = false) MultipartFile file) throws IOException {
// TODO 文件上传接口
String fileName = file.getOriginalFilename();
Map<String, Object> m = new HashMap<String, Object>();
BufferedOutputStream outputStream = null;
try {
InputStream fileInputStream = file.getInputStream();
String datefolder = "/" + DateUtil.dateToString(new Date(), "yyyy") + "/"
+ DateUtil.dateToString(new Date(), "MM") + "/"
+ DateUtil.dateToString(new Date(), "dd" + "/" + (Integer.parseInt(DateUtil.dateToString(new Date(), "hh"))+0) )
+ DateUtil.dateToString(new Date(), "mm" + DateUtil.dateToString(new Date(), "ss"));// 日期命名的文件夹
String webParentPath = new File(request.getSession().getServletContext().getRealPath("/")).getParent()
.replace("\\\\", "/");// 当前WEB环境的上层目录
String realPath = webParentPath + "/gcrcsUploadFile" + datefolder;// 文件上传到服务器的真实路径
File up = new File(realPath);
if (!up.exists()) {
up.mkdirs();
}
String newFileName = fileName;
String filePath = "/gcrcsUploadFile" + datefolder + "/" + newFileName;
outputStream = new BufferedOutputStream(new FileOutputStream(new File(realPath, newFileName)));
IOUtils.copy(fileInputStream, outputStream);
//这两个流一定要关闭，不然接下来上传到七牛上文件会缺失
fileInputStream.close();
outputStream.close();
logger.error("文件在服务器的绝对路径："+ new File(realPath, newFileName).toString());
logger.error("文件在服务器的相对路径：" + filePath);
// ++++++++上传文件到七牛 +++++++++
boolean flag = new QiniuUtils().uploadFIle( new File(realPath, newFileName).toString().replace("\\\\", "/") , filePath);
Map<String, Object> data = new HashMap<String, Object>();
// 保存附件
data.put("picUrl", filePath);
data.put("videoUrl", filePath);
m.put("status", 0);
m.put("msg", "上传成功");
m.put("data", data);
if(flag){
logger.error("++++++++++ 上传文件" + filePath + "到七牛【成功】 ++++++++++");
//后期上传到云 成功 后把上传到本地的删除
}else{
m.put("status", 1);
m.put("msg", "上传失败");
m.put("data", data);
logger.error("++++++++++ 上传文件到七牛【失败】 ++++++++++");
}
} catch (Exception e) {
logger.error("error on deploy process, because of file input stream", e);
} finally {
outputStream.flush();
outputStream.close();
}
return m;
}
/**
* 七牛云上传获得uptoken
* @author wanningxi
* @return
*/
@ResponseBody
@RequestMapping("/getJSUpToken")
public Object getJSUpToken() {
logger.error("获取七牛UpToken");
Map<String, Object> map = new HashMap<String, Object>();
try {
return new QiniuUtils().getJSUpToken();
} catch (Exception e) {
e.printStackTrace();
logger.error("Exception : " + e);
return ResultMapUtils.systemError(e);
}
}
qiniuTest.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>七牛云测试</title> <%-- 引入qiniu扩展 --%> <script src="${pageContext.request.contextPath}/resources/js/qiniu/jquery.min.js" type="text/javascript" charset="utf-8"></script> <%-- <script src="${pageContext.request.contextPath}/resources/js/qiniu/moxie.js" type="text/javascript" charset="utf-8"></script> --%> <%-- <script src="${pageContext.request.contextPath}/resources/js/qiniu/plupload.full.min.js" type="text/javascript" charset="utf-8"></script> --%> <%-- <script src="${pageContext.request.contextPath}/resources/js/qiniu/qiniu.js" type="text/javascript" charset="utf-8"></script> --%> <script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.8/plupload.full.min.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.9/moxie.min.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script> <script src="${pageContext.request.contextPath}/resources/js/qiniu/ui.js" type="text/javascript" charset="utf-8"></script> </head> <body> <p class="tip1">本demo实现的图片预览功能需要浏览器支持data URL，IE8+以及其他标准浏览器都是支持的</p> <div id="container"> <a class="btn btn-default btn-lg " id="pickfiles" style="width:160px" href="#" > <i class="glyphicon glyphicon-plus"></i> <span>选择文件</span> </a> </div> </body> </html> <script type="text/javascript"> var time = getNowFormatDate(); var token = getTokenMessage(); uptoken = token.substring(token.indexOf("\\"")+1,token.lastIndexOf("\\"")); var uploader = Qiniu.uploader({ runtimes: ‘html5,flash,html4‘, // 上传模式，依次退化 browse_button: ‘pickfiles‘, // 上传选择的点选按钮，必需 // 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置 // 切如果提供了多个，其优先级为uptoken > uptoken_url > uptoken_func // 其中uptoken是直接提供上传凭证，uptoken_url是提供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func uptoken : uptoken, // uptoken是上传凭证，由其他程序生成 // uptoken_url: ‘http://localhost:8080/LRVideo/appservice/basic/getJSUpToken‘, // Ajax请求uptoken的Url，强烈建议设置（服务端提供） // uptoken_func: function(file){ // 在需要获取uptoken时，该方法会被调用 // // do something // return uptoken; // }, get_new_uptoken: false, // 设置上传文件的时候是否每次都重新获取新的uptoken // downtoken_url: ‘/downtoken‘, // Ajax请求downToken的Url，私有空间时使用，JS-SDK将向该地址POST文件的key和domain，服务端返回的JSON必须包含url字段，url值为该文件的下载地址 // unique_names: true, // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名） // save_key: true, // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key，则开启，SDK在前端将不对key进行任何处理 domain: ‘http://onsoxm2o9.bkt.clouddn.com‘, // bucket域名，下载资源时用到，必需 container: ‘container‘, // 上传区域DOM ID，默认是browser_button的父元素 max_file_size: ‘100000mb‘, // 最大文件体积限制 flash_swf_url: ‘path/of/plupload/Moxie.swf‘, //引入flash，相对路径 max_retries: 3, // 上传失败最大重试次数 dragdrop: true, // 开启可拖曳上传 drop_element: ‘container‘, // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传 chunk_size: ‘0mb‘, // 分块上传时，每块的体积 auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传 //x_vars : { // 查看自定义变量 // ‘time‘ : function(up,file) { // var time = (new Date()).getTime(); // do something with ‘time‘ // return time; // }, // ‘size‘ : function(up,file) { // var size = file.size; // do something with ‘size‘ // return size; // } //}, init: { ‘FilesAdded‘: function(up, files) { plupload.each(files, function(file) { // 文件添加进队列后，处理相关的事情 }); }, ‘BeforeUpload‘: function(up, file) { // 每个文件上传前，处理相关的事情 }, ‘UploadProgress‘: function(up, file) { var progress = new FileProgress(file, ‘fsUploadProgress‘); var chunk_size = plupload.parseSize(this.getOption(‘chunk_size‘)); progress.setProgress(file.percent + "%", file.speed, chunk_size); console.log("Progress：" + file.percent + "%"); }, ‘FileUploaded‘: function(up, file, info) { // 每个文件上传成功后，处理相关的事情 // 其中info是文件上传成功后，服务端返回的json，形式如： // { // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98", // "key": "gogopher.jpg" // } // 查看简单反馈 var domain = up.getOption(‘domain‘); var res = JSON.parse(info); sourceLink = domain +"/"+ res.key; //获取上传成功后的文件的Url console.log("sourceLink：" + sourceLink); }, ‘Error‘: function(up, err, errTip) { //上传出错时，处理相关的事情 }, ‘UploadComplete‘: function() { //队列文件处理完毕后，处理相关的事情 }, ‘Key‘: function(up, file) { // 若想在前端对每个文件的key进行个性化处理，可以配置该函数 // 该配置必须要在unique_names: false，save_key: false时才生效 var Date = getNowFormatDate(); var fileName = file.name; var key = getNowFormatDate() + "/" + file.name; // do something with key here return key } } }); // domain为七牛空间对应的域名，选择某个空间后，可通过 空间设置->基本设置->域名设置 查看获取 // uploader为一个plupload对象，继承了所有plupload的方法 function getTokenMessage() { var token; $.ajax({ url:"http://localhost:8080/LRVideo/appservice/basic/getJSUpToken", async:false, success:function (data) { token = data; } }) return token; } function getNowFormatDate() { var myDate = new Date(); var year = myDate.getFullYear(); var month = myDate.getMonth() + 1; var day = myDate.getDate(); var hour = myDate.getHours(); var min = myDate.getMinutes(); var second = myDate.getSeconds(); if (month >= 0 && month <= 9) { month = "0" + month; } if (day >= 0 && day <= 9) { day = "0" + day; } if (hour >= 0 && hour <= 9) { hour = "0" + hour; } if (min >= 0 && min <= 9) { min = "0" + min; } if (second >= 0 && second <= 9) { second = "0" + second; } var currentdate = year + "/" + month + "/" + day + "/" + hour + "/" + min + "/" + second; return currentdate; } </script>
以上是关于引入七牛云js上传的主要内容，如果未能解决你的问题，请参考以下文章