科普:express 和 koa 文件上传、上传到七牛
每个系统最可能需要的一部分
express里multer
https://github.com/expressjs/multer
它是基于busboy的,官方推荐
我的基本诉求
- 上传(可以拖拽最好,支持多张最好)
- 显示进度条
- 可以有各种回调
选型
https://github.com/blueimp/jQuery-File-Upload 这个star最多,但nodejs部分代码太老,又要自己定制
于是找到了
https://github.com/hayageek/jquery-upload-file
满足我所有的诉求
主要是简单,它处理浏览器部分的工作,multer再上传到服务器上
核心流程2步
- 前端jquery-upload-file
- 后端使用express的multer上传组件
经典用法
支持一次上传多个文件。
在app.js里,注意路由处理之前
var mount_uploadify = require('uploadify')
mount_uploadify(app,{
path:'/fileupload',
fileKey:'myfile',
multer:{ dest: 'uploads/' },
callback:function(req){
console.log(111);
return req.files
}
});
然后在views层引入js和css文件,以jade为例子(moa-frontend里的实际代码)
定义header引入
https://github.com/moajs/moa-frontend/blob/master/views/layout/head.uploadify.jade
link(href='/assets/js/plugins/jquery-upload-file/css/uploadfile.css', rel='stylesheet')
script(src='/assets/js/plugins/jquery-upload-file/js/jquery.uploadfile.min.js')
定义布局文件
https://github.com/moajs/moa-frontend/blob/master/views/layout/layout.uploadify.jade
doctype html
html
head
title= title
include ./head
include ./head.uploadify.jade
body.pace-done
.wrapper
include ./menu
div(id="page-wrapper" class="gray-bg" style="min-height: 761px;")
include ./topbar
include ./footer
block content
编写自己的页面
https://github.com/moajs/moa-frontend/blob/master/views/demo/uploadify.jade
extends ../layout/layout.uploadify
block content
h1= title
p Welcome to #{title}
#fileuploader Upload
script.
$(document).ready(function() {
$("#fileuploader").uploadFile({
url:"/fileupload/",
fileName:"myfile",
multiple:true,
dragDrop:true,
showDownload:true,
showDelete: true,
onSuccess: function (files, response, xhr, pd) {
alert(JSON.stringify(files));
},
statusBarWidth:600,
dragdropWidth:600,
deleteCallback: function (data, pd) {
for (var i = 0; i < data.length; i++) {
alert(data);
$.post("delete.php", {op: "delete",name: data[i]},
function (resp,textStatus, jqXHR) {
//Show Message
alert("File Deleted");
});
}
pd.statusbar.hide(); //You choice.
},
downloadCallback:function(filename,pd)
{
location.href="download.php?filename="+filename;
}
});
});
上传图片到七牛
重要说明,上传到七牛目前只支持单张上传。
在app.js里,注意路由处理之前
mount_uploadify(app,{
debug: false,
qn: simditor_qn_config.qn,
path: '/fileupload',
fileKey: 'myfile',
multer: simditor_qn_config.multer,
callback: function(req){
console.log(req);
}
});
同上面的layout用法,只有onSuccess取值上的不同
$("#fileuploader").uploadFile({
url:"/fileupload/",
fileName:"myfile",
multiple:true,
dragDrop:true,
showDownload:true,
showDelete: true,
onSuccess: function (files, response, xhr, pd) {
alert(JSON.stringify(response[0].url.split('/').pop()));
},
statusBarWidth:300,
dragdropWidth:300,
deleteCallback: function (data, pd) {
for (var i = 0; i < data.length; i++) {
alert(data);
$.post("delete.php", {op: "delete",name: data[i]},
function (resp,textStatus, jqXHR) {
//Show Message
alert("File Deleted");
});
}
pd.statusbar.hide(); //You choice.
},
downloadCallback:function(filename,pd)
{
location.href="download.php?filename="+filename;
}
});
比如http://img.mengxiaoban.cn/FuHkI0z4A5uHk5DtkmdoMhqEiUEt
response[0].url.split(’/’).pop() == FuHkI0z4A5uHk5DtkmdoMhqEiUEt
和自己绑定的域名拼接到一起就可以了
为什么要让uploadify支持七牛?
七牛的sdk实在是一个比一个烂。。。。。
感谢@fengmk2的https://github.com/node-modules/qn
七牛的前端js-sdk
http://developer.qiniu.com/docs/v6/sdk/javascript-sdk.html
https://github.com/qiniu/js-sdk/
- Plupload ,建议 2.1.1 及以上版本
- qiniu.js,SDK主体文件,上传功能\数据处理实现
擦。想使用这个sdk,恶心坏了。。。。。
而且还是基于 GPL V2 协议发布,到底想闹哪样?想死还是不想活啊?
于是改造uploadify
- 文件上传到服务器
- 服务器再上传到七牛
- 成功后返回给客户端
代码
很简单,用着也简单,欢迎使用和star
https://github.com/i5ting/uploadify
全文完
欢迎关注我的公众号【node全栈】
联系我,更多交流
顺便帮忙写个 ThinkJS 文件上传到七牛吧
欢迎集成到file-cloud-uploader: https://github.com/file-cloud/file-cloud-uploader
在 dependency 里面发现了 qn。。。。。。。。
@alsotang 比较好用啊,哈哈
@calidion 看起来不错
@welefen 目前还木有?
七牛支持镜像,你在七牛后台设好域名,直接访问七牛域名+图片地址它会自动把图片抓过来,不需要自己从服务器向七牛传
我见过自己写ajax传得,你说的这个我没见过, 求指点
@i5ting 就是在七牛后台设置你的网站域名,比如 http://www.a.com,然后假设你的七牛仓库的域名是 http://qiniu.aaa.com(七牛会给每个仓库分配一个域名,也可以使用自己的域名),然后就可以直接通过七牛域名访问资源了,只要这个资源在你的源站有,当你访问时七牛会自动从源站拉到七牛仓库里,不需要自己专门传过去的。你看下七牛的文档,只有两种使用方法:一,客户端直传七牛,七牛通过回调把资源发给用户服务器;二,传到用户服务器,七牛自动镜像。
@brickyang 棒棒哒,O(∩_∩)O谢谢啊
目前已经支持koa 2 version,在koa分支下面