前端如何上传文件到七牛
2017-05-18 10:58
459 查看
以下内容都是依据官方链接进行实践时的经验
框架简介
Node.js使用express框架提供http支持。使用express+ejs提供渲染带数据页面的服务来响应浏览器的页面请求
使用express的static中间件提供静态css js 图片资源的服务
使用express的get post响应页面中的请求并进行与七牛相关的处理
在浏览器打开的进行上传操作的交互页面中使用Plupload前端js库来进行上传，并利用Node.js作为后端，接受前端的上传，之后与七牛服务器进行交互。
具体细节
后端express服务 server.js
/* 本文件为Node.js服务，后面引述时简称SERVER
* 在根路径使用的ejs模板文件upload.html，简称 HTML
* HTML中引用的upload.js为我们使用qiniu-js-sdk和Plupload的具体文件，简称HTMLJS
*/
var qiniu = require('qiniu');
var express = require('express');
var config = {
'ACCESS_KEY': 'Xxxxx-xxxxxx',
'SECRET_KEY': '_xxxxAS--xxxxxxxxxxxxxxxx',
'Bucket_Name': 'yxxxxxxxxd',
'Port': 19110,
'Uptoken_Url': 'uptoken',
'Domain': 'http://xxxxxxxxxx.bkt.clouddn.com/'
};
var app = express();
// 使用static中间件提供静态资源服务，返回启动node服务的当前目录的静态资源
app.use(express.static(__dirname + '/'));
// ejs引擎配置
app.set('views', __dirname + '/');
app.engine('html', require('ejs').renderFile);
/* 前端qiniu js-sdk初始化时请求的url，这个路径是自定义的，可以定义为任意值。目前流程是：
* 在HTML中使用的HTMLJS中使用了qiniu-js-sdk，引入了qiniu-js-sdk之后执行 Qiniu.uploader({...})时立
* 即执行初始化，初始化时会使用uptoken_url的方式向SERVER请求token，而这个uptoken_url的地址是HTML中
* 的$('#uptoken_url').val()，而'#uptoken_url'的值是ejs套HTML模板的时候用config.Uptoken_Url填
* 充的（见下下方app.get('/', function(req, res) {...}部分），所以在上面的config中给Uptoken_Url设
* 置了什么样的字符串值，下面处理token的接口就使用什么字符串。
*/
app.get('/uptoken', function(req, res, next) {
// 使用七牛Node.js的sdk从七牛获得的token：new qiniu.rs.PutPolicy(config.Bucket_Name);
var token = uptoken.token();
res.header("Cache-Control", "max-age=0, private, must-revalidate");
res.header("Pragma", "no-cache");
res.header("Expires", 0);
if (token) {
// 返回给前端qiniu-js-sdk初始化时使用的token
res.json({
uptoken: token
});
}
});
app.get('/', function(req, res) {
// 使用ejs模板引擎渲染HTML页面，塞domain和uptoken_url的值进去
res.render('upload.html', {
domain: config.Domain,
uptoken_url: config.Uptoken_Url
});
});
qiniu.conf.ACCESS_KEY = config.ACCESS_KEY;
qiniu.conf.SECRET_KEY = config.SECRET_KEY;
var uptoken = new qiniu.rs.PutPolicy(config.Bucket_Name);
app.listen(config.Port, function() {
console.log('Listening on port %d', config.Port);
});
HTML模板文件 upload.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端上传-七牛云存储</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/todc-bootstrap/3.1.1-3.2.1/todc-bootstrap.min.css"> </head> <body> <div class="container"> <div class="text-left col-md-12 wrapper"> <h1 class="text-left col-md-12 "> 资源上传到七牛 </h1> <!-- qiniu-js-sdk初始化时请求token的url和上传地址都在这里填充模板时填充了 --> <input type="hidden" id="domain" value="<%= domain %>"> <input type="hidden" id="uptoken_url" value="<%= uptoken_url %>"> <ul class="tip col-md-12 text-mute"> <li> <small> 通过 Html5 模式上传文件至七牛云存储。 </small> </li> <li> <small>Html5模式大于4M文件采用分块上传。</small> </li> <li> <small>上传图片可查看处理效果。</small> </li> <li> <small>本示例限制最大上传文件100M。</small> </li> </ul> </div> <div class="body"> <div class="col-md-12"> <div id="container"> <a class="btn btn-default btn-lg " id="pickfiles" href="#" > <i class="glyphicon glyphicon-plus"></i> <span>选择文件</span> </a> </div> </div> <div style="display:none" id="success" class="col-md-12"> <div class="alert-success"> 队列全部文件处理完毕 </div> </div> <div class="col-md-12 "> <table class="table table-striped table-hover text-left" style="margin-top:40px;display:none"> <thead> <tr> <th class="col-md-4">Filename</th> <th class="col-md-2">Size</th> <th class="col-md-6">Detail</th> </tr> </thead> <tbody id="fsUploadProgress"> </tbody> </table> </div> </div> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/plupload.full.min.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/moxie.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/plupload/2.1.2/i18n/zh_CN.js"></script> <script type="text/javascript" src="module/ui.js"></script> <!-- qiniu.js依赖于Plupload，所以Plupload要在qiniu.js之前引用 --> <script type="text/javascript" src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script> <script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.8.0/highlight.min.js"></script> <script type="text/javascript" src="upload.js"></script> </body> </html>
HTMLJS 前端JS upload.js
// 前面已经引入好了下列js
/*global Qiniu */
/*global plupload */
/*global FileProgress */
/*global hljs */
$(function() {
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'pickfiles',
// HTML中重要的div的ID
container: 'container',
drop_element: 'container',
max_file_size: '1000mb',
dragdrop: true,
chunk_size: '4mb',
// qiniu-js-sdk初始化时请求token的url的值
uptoken_url: $('#uptoken_url').val(),
// 上传的域名地址
domain: $('#domain').val(),
get_new_uptoken: false,
auto_start: true,
log_level: 5,
init: {
'FilesAdded': function(up, files) {
$('table').show();
$('#success').hide();
plupload.each(files, function(file) {
var progress = new FileProgress(file, 'fsUploadProgress');
progress.setStatus("等待...");
progress.bindUploadCancel(up);
});
},
'BeforeUpload': function(up, file) {
var progress = new FileProgress(file, 'fsUploadProgress');
var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
if (up.runtime === 'html5' && chunk_size) {
progress.setChunkProgess(chunk_size);
}
},
'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);
},
'UploadComplete': function() {
$('#success').show();
},
'FileUploaded': function(up, file, info) {
var progress = new FileProgress(file, 'fsUploadProgress');
progress.setComplete(up, info);
},
'Error': function(up, err, errTip) {
$('table').show();
var progress = new FileProgress(err.file, 'fsUploadProgress');
progress.setError();
progress.setStatus(errTip);
}
}
});
uploader.bind('FileUploaded', function() {
console.log('hello man,a file is uploaded');
});
// 拖拽时美化样式
$('#container').on(
'dragenter',
function(e) {
e.preventDefault();
$('#container').addClass('draging');
e.stopPropagation();
}
).on('drop', function(e) {
e.preventDefault();
$('#container').removeClass('draging');
e.stopPropagation();
}).on('dragleave', function(e) {
e.preventDefault();
$('#container').removeClass('draging');
e.stopPropagation();
}).on('dragover', function(e) {
e.preventDefault();
$('#container').addClass('draging');
e.stopPropagation();
});
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端如何上传文件到七牛
- springMVC后台如何接受前端上传的文件，与及下载文件
- 【前端七牛组件】使用js 实现七牛云的上传文件操作
- springMVC后台如何接受前端上传的文件，与及下载文件
- Mac svn如何上传.a文件
- asp.net如何上传大文件?
- Web Api 如何做上传文件的单元测试
- 用C#如何实现大文件的断点上传
- php中web上传文件的原理及如何限制上传文件的大小及格式
- asp.net如何把文件上传到另外一台服务器
- 如何使用 paramiko 模块来实现远程执行OS命令和文件上传下载？
- 如何使用Flashfxp上传下载文件
- 如何从Windows远程上传文件到Linux（例如CentOS 7）
- Mac上如何通过跳板机向服务器上上传大文件
- linux下如何使用sftp命令进行文件上传和下载
- svn 如何往svn上传原本被忽略的*.a文件
- 基于SpringMVC开发文件上传，前端使用bootstrap
- php上传文件与图片到七牛的实例详解
- 【SVN】如何使用SVN上传、添加、删除文件
- php上传Excel文件时如何判断文件中有图片