html七牛云图片文件上传,使用Js将文件图片视频上传到七牛云详细教程-Fun言

前言

因为项目需要，需要将一些较大文件上传到七牛云，以前都是通过数据流上传到服务端，然后在服务端进行上传操作，因为以前文件都很小所以无所谓，但是要是几百M的文件就不行了，所以就采用前端js直接上传到七牛云的方式上传，通过查阅各种资料，官方文档，然后路上踩到了各种坑，下面把详细教程分享一下。

开发过程

1、引入相关js，此处一个坑，就是官方给的

这个上传是基于plupload插件之上封装的。注意plupload已经更新到2.3.1了，并且2.2开始已经把moxie干掉了而七牛云的sdk是需要moxie的，所以如果你引入了2.2及其以上的版本会报这样的错误。Uncaught ReferenceError: mOxie is not defined

所以需要引入2.2以下的版本，奉上cdn，最好下载到本地，这样快一点

2、写获取uptoken的接口，因为uptoken不能直接暴露在前端，所以需要通过接口获取@GetMapping("uptoken")

@ResponseBody

public JSONObject uptoken(@RequestParam Map params, Model model) throws AuthException {

JSONObject json = new JSONObject();

Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY); //ak，sk是注册完后给你的

String upToken = auth.uploadToken(bucketname);

json.put("uptoken",uptoken);

return json;

}

注意：//返回数据的格式必须是，无论你返回多少数据，uptoken一定放在第一个

{

"uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL...",

"xxx": "..."

}

3、前端选择文件按钮，无论样式什么样，必须把按钮放在id为container的下面，并且按钮有唯一id

选择文件

开始上传

4、Js代码

var uploader = Qiniu.uploader({

disable_statistics_report: false, // 禁止自动发送上传统计信息到七牛，默认允许发送

runtimes: 'html5,flash,html4', // 上传模式，依次退化

browse_button: 'uploadFile', // 上传选择文件的点选按钮，必需

container: 'container', // 上传区域DOM ID，默认是browser_button的父元素

max_file_size: '200mb', // 最大文件体积限制

flash_swf_url: '/static/common/qiniu/Moxie.swf', // 引入flash，相对路径

dragdrop: false, // 关闭可拖曳上传

chunk_size: '4mb', // 分块上传时，每块的体积

uptoken:getTokenMessage().token, // 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置,uptoken是上传凭证，由其他程序生成;uptoken_url是提供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func;其优先级为uptoken > uptoken_url > uptoken_func

domain: 'http://xxxx.com/', // bucket域名，下载资源时用到，必需

get_new_uptoken: true, // 设置上传文件的时候是否每次都重新获取新的uptoken

auto_start: false, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传

max_retries: 3, // 上传失败最大重试次数

save_key: false, //为false则以上传文件的原名命名，否则随机命名，这里推荐false

init: {

'FilesAdded': function(up, files) { // 文件添加进队列后，处理相关的事情

plupload.each(files, function(file) {

console.log(file);

$("#filename").val(file.name)

});

},

'BeforeUpload': function(up, file) { // 每个文件上传前，处理相关的事情

console.log("开始上传之前");

},

'UploadProgress': function(up, file) { // 每个文件上传时，处理相关的事情

console.log("上传中");

$(".bar").css("width",file.percent+'%');

$(".bar").html(file.percent+'%');

},

'FileUploaded': function(up, file, info) { // 每个文件上传成功后，处理相关的事情

console.log("上传成功");

$(".bar").html('上传成功！');

var domain = up.getOption('domain');

var res = $.parseJSON(info);

var sourceLink = domain + res.key;

$("#versionLink").val(sourceLink);

},

'Error': function(up, err, errTip) {

console.log("上传出错")

},

'UploadComplete': function() {

//队列文件处理完毕后，处理相关的事情

}

}

});

function getTokenMessage() {

var token = {};

$.ajax({

url:'${ctxPath!}/qp/version/uptoken',

async:false,

success:function (data) {

token.token = data.uptoken;

}

})

return token;

}

document.getElementById('startUpload').onclick = function() {

uploader.start();

};

这样一个完整的通过js上传到七牛云的案例就完成了

你还没有登录，请先使用 QQ登录 或 注册！

文章评论

发表评论