基于express的上传文件到七牛云 - 简书
基于express的上传文件到七牛云
今天刚把博客用 cdn 加速,但是文件上传还存在之前的服务器中,七牛云那么多免费空间和流量,不用白不用,果断把文件直接上传到七牛云中.附上博客地址这篇文章也是看了前人的攻略来写的,作为自己的一个记录
通过 npm 以 node 模块化的方式安装：
npm install qn bytes multer --save
multer： 上传文件的中间件来上传文件的。
qn ： 第三方提供的上传文件至七牛云模块。
做了一个简单的分离
上传核心代码：
1.七牛云配置文件
* Created by demongao on .
* config.js
const path = require('path');
module.exports = {
root: path.resolve(__dirname, '../'), //根目录
//七牛云 配置
serverUrl:'服务器地址',
qiniu_config:{
//需要填写你的 Access Key 和 Secret Key
accessKey:'accessKey',
secretKey:'secretKey',
bucket: 'bucket',
origin: '',
2.multer 图片上传的配置
* Created by demongao on .
* multerUtil.js
const bytes = require('bytes');
const multer = require('multer');
// 配置multer
// 详情请见/expressjs/multer
const storage = multer.memoryStorage()
const upload = multer({
storage: storage,
fileSize: bytes('4MB') // 限制文件在4MB以内
fileFilter: function(req, files, callback) {
// 只允许上传jpg|png|jpeg|gif格式的文件
var type = '|' + files.mimetype.slice(files.mimetype.lastIndexOf('/') + 1) + '|';
var fileTypeValid = '|jpg|png|jpeg|gif|'.indexOf(type) !== -1;
callback(null, !!fileTypeValid);
module.exports =
3.路由设置
* Created by demongao on .
* qnupload.js
// Express.js以及路由
const express = require('express');
const router = express.Router();
const qn = require('qn');
const upload = require('./../config/qiniuUtil')
var config = require('./../config/config').qiniu_
var serverURL = require('./../config/config').serverU;
router.post('/profile', function(req, res, next) {
// 七牛相关配置信息
let client = qn.create(config);
// 上传单个文件
// 这里`avatar`对应前端form中input的name值
upload.single('avatar')(req, res, function(err) {
if (err) {
return console.error(err);
if (req.file && req.file.buffer) {
//获取源文件后缀名
var fileFormat = (req.file.originalname).split(".");
//设置上传到七牛云的文件命名
var filePath = '/upload/article/' + req.file.fieldname + '-' +Date.now() + '.' +fileFormat[fileFormat.length - 1];
// 上传到七牛
client.upload(req.file.buffer, {
key: filePath
}, function(err, result) {
if (err) {
res.status(200).send({
msg:'上传失败'
res.status(200).send({
//将保存路径传递给页面(我用的 markdon 编辑器)
path:serverURL+filePath
module.exports =
上图 就是我用这个上传的图片,感觉不错~ 博客的确变快了不少(O(∩_∩)O~)
写到这里,我在想一个问题,如果我换了一个存储图片的地方,我图片路径怎么处理,因为我用的 markdown, 直接将图片路径保存成本文了 , 我的想法是:
读取数据库文章内容,然后使用正则表达式匹配出`[*]()` 里面的地址路径,并将我 cdn 的域名换成要存放图片的域名
也不知道我这个想法正不正确,不过是可以拿出来的
推荐一个压缩软件
上传图片的时候,可能图片比较大,可以压缩一下, 给大家推荐一个比较良心的软件 PP鸭,好用,可以批量压缩图片,还可以恢复为原图 ,Mac 版也可以用喔 , 虽然一次只能压缩10张,不过重启一下还能继续压缩.
multer官方文档：
bytes文档：
另外:推荐一篇关于 vue-cli webpack配置的详解
更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！
做一个敢拼敢闯敢干的程序猿主题 : 求大神们 帮帮小菜鸟，使用post请求 在七牛上传图片问题
级别: 新手上路
UID: 352929
可可豆: 18 CB
威望: 15 点
在线时间: 71(时)
发自: Web Page
来源于&&分类
求大神们 帮帮小菜鸟，使用post请求 在七牛上传图片问题&&&
&&&&NSString *str = @&/&;
&&&&NSURL *url = [NSURL URLWithString:str];
&&&&NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:30.f];
&&&&UIImageJPEGRepresentation(self.OHMRImageView.image, 1);
//&&&&UIImagePNGRepresentation(self.OHMRImageView.image);
&&&&//得到图片的data
&&&&NSData *IMGdata = UIImagePNGRepresentation(self.OHMRImageView.image);
//&&&&NSString *R = [[NSString alloc] initWithData:IMGdata&&encoding:NSUTF8StringEncoding];
//&&&&NSString *text = [data base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
//&&&&NSString *r = [data description];
&&&&NSString *bodyStr = [NSString stringWithFormat:@&token=%@&file=%@&key=%@&x:uid=100228&, token, IMGdata, key];
&&&&NSLog(@&token=%@&file=%@&key=%@&x:uid=%@&, token, IMGdata, key, @&100228&);
&&&&NSData *bodyData = [bodyStr dataUsingEncoding:NSUTF8StringEncoding];
&&&&[request setHTTPBody:bodyData];
&&&&[request setHTTPMethod:@&POST&];
&&&&[NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
&&&&&&&&NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
&&&&&&&&NSLog(@&上传资料 = %@&, dic);
&&&&&&&&NSString *str = [NSString stringWithFormat:@&%@&, dic[@&code&]];
&&&&&&&&if ([str isEqualToString:@&0&]) {
&&&&&&&&&&&&
&&&&&&&&&&&&NSLog(@&自拍照成功&);
&&&&&&&&&&&&
上传七牛服务器&&就是我的file 有问题 返回结果是是 error = &invalid multipart format&;&& 求帮忙啊！！！！应该如何上传图片&&附上七牛连接：&&
级别: 新手上路
UID: 422330
可可豆: 416 CB
威望: 337 点
在线时间: 107(时)
发自: Web Page
同问啊，大神们在哪里？
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题,在使用七牛官方给的DEMO 版本 6.1.11 进行文件上传时报出 Qiniu_HttpClient
文件已经加载. CURL也已经开启.查看http.php文件中的 Qiniu_Client_do 也没有发现什么,
SF中搜索发现一个类似的问题查看之后 只是对SDK的整合.
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
就是少文件了啊，httpclient 那个类文件没加载诶，你找找看看有没有。
老实说七牛的那个SDK烂到爆…还是用你搜到的那个整合版吧。
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
七牛无法上传文件。。。
前几天就不行了
一直显示服务器连接失败
换其他浏览器上传也不行。
这个问题已被关闭，原因：
来源: 七牛云存储问答
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你这种情况，以前我也遇到过，我怀疑的是跟当地的节点有关系，你可以traceroute一下 ，发上来，然后大家看看，你也可以重启一下猫~ 然后你改用上传工具，然后~~~设置完毕 去打dota吧~~玩完之后就上传完毕了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以贴下你 ping
的结果么？
这个问题已经被关闭无法回答
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：iOS 七牛云上传并获取图片----【客户端】
时间： 17:11:55
&&&& 阅读：1303
&&&& 评论：
&&&& 收藏：0
标签：&&&&&& 最近做了七牛云存储的有关内容，涉及到与后台交互获取验证的token，无奈，后台自命清高，不与理会，没办法呀，于是自己搞呗。首先呢在在七牛上注册一个账号，然后呢添加一个存储空间这时候空间名是用来识别存储空间的位置，而地区的选择则是设置存储七牛服务器的位置，那么选择一个公开空间免费试用就可以了~~
&&&&&& 创建好账号就是查看官方文档编写demo的流程了，顺便附带一个下载地址：&&& 下载来看了下七牛关于ios开发的demo 使用cocopod 管理的。天啊，最近的项目一直没用它，担心更新的问题会不会造成不能使用了。。。。。。果真，由于软件的ruby 版本过低，更新不了第三方的库，只好又升级了一下第三方的库，具体升级方式请参考…这样很快就会更新好，但是呢里面也有涉及到的一部分升级失败的情况，一般都会有错误提示，对应的查找就能解决。我升级的时候是版本号写的过高了，导致一直找不到对应的类库，所以升级的时候不必写太高，2.2.2版本就好顺便附带一些解决方法 &
&&&&&&& 终于一切环境需求都准备好了，那就直接引入呗，这时pod导入之后，因为之前的升级，所以一般不会出现文档中提到的错误，很顺利的引入了这个类库。这时候的关键是获得验证的token 在官方文档中这个token 是要从自己的后台服务器获得的，没办法，后台不配合也只能自己动手丰衣足食了。&&&&&&&&&& 首先这个token 是用作验证使用的，，官方建议使用后台生成后，客户端再获取使用。但客户端也能独自生成具体生成方法如下：
-(void)createToken {
if (!self.scope.length || !self.accessKey.length || !self.secretKey.length) {
// 将上传策略中的scrop和deadline序列化成json格式
NSMutableDictionary *authInfo = [NSMutableDictionary dictionary];
[authInfo setObject:self.scope forKey:@"scope"];
setObject:[NSNumber numberWithLong:[[NSDate date] timeIntervalSince1970] + self.liveTime * <span style="color: # * <span style="color: #00]
forKey:@"deadline"];
NSData *jsonData =
[NSJSONSerialization dataWithJSONObject:authInfo options:NSJSONWritingPrettyPrinted error:nil];
// 对json序列化后的上传策略进行URL安全的base64编码
NSString *encodedString = [self urlSafeBase64Encode:jsonData];
// 用secretKey对编码后的上传策略进行HMAC-SHA1加密，并且做安全的base64编码，得到encoded_signed
NSString *encodedSignedString = [self HMACSHA1:self.secretKey text:encodedString];
// 将accessKey、encodedSignedString和encodedString拼接，中间用：分开，就是上传的token
NSString *token =
[NSString stringWithFormat:@"%@:%@:%@", self.accessKey, encodedSignedString, encodedString];
self.uploadToken =
&&& 有关函数的调用为：将进行URL安全的base64编码：
- (NSString *)urlSafeBase64Encode:(NSData *)text {
NSString *base64 =
[[NSString alloc] initWithData:[QN_GTM_Base64 encodeData:text] encoding:NSUTF8StringEncoding];
base64 = [base64 stringByReplacingOccurrencesOfString:@"+" withString:@"-"];
base64 = [base64 stringByReplacingOccurrencesOfString:@"/" withString:@"_"];
return base64;
& & & 对上传策略中进行HMAC-SHA1加密：
- (NSString *)HMACSHA1:(NSString *)key text:(NSString *)text {
const char *cKey = [key cStringUsingEncoding:NSUTF8StringEncoding];
const char *cData = [text cStringUsingEncoding:NSUTF8StringEncoding];
char cHMAC[CC_SHA1_DIGEST_LENGTH];
CCHmac(kCCHmacAlgSHA1, cKey, strlen(cKey), cData, strlen(cData), cHMAC);
NSData *HMAC = [[NSData alloc] initWithBytes:cHMAC length:CC_SHA1_DIGEST_LENGTH];
NSString *hash = [self urlSafeBase64Encode:HMAC];
&&&& 上面涉及到三个参数，即：Scope、AccessKey、SecretKey,这三个参数是上面我们申请账号和创建空间的时候得到的，先说第一个参数： Scope : 就是空间的名字，那两个key就是在个人面板--&个人中心--&秘钥管理里面能看的到如下所示：
&&&&&& 这样拿到了token 再写方法就简单多了，下面是针对上传图片做了一个封装的方法：
-(void)uploadImageToQNFilePath:(NSString *)filePath {
QNUploadManager *upManager = [[QNUploadManager alloc] init];
QNUploadOption *uploadOption = [[QNUploadOption alloc] initWithMime:nil progressHandler:^(NSString *key, float percent) {
NSLog(@"上传进度 %.2f", percent);
params:nil
checkCrc:NO
cancellationSignal:nil];
[upManager putFile:filePath key:nil token:self.uploadToken complete:^(QNResponseInfo *info, NSString *key, NSDictionary *resp) {
// 发送通知用户获取图片使用
NSNotification * notice =[NSNotification notificationWithName:@"downLoad" object:nil userInfo:resp];
[[NSNotificationCenter defaultCenter] postNotification:notice];
option:uploadOption];
&&&& &&&& 这样就可以将图片上传上去了 此时我们可以得打两个返回值 形式如下：
&& 这个时候我们可以拿着这个返回值，拼接我们从七牛云后台获取的文件路径进行拼接使用SDWebImage就可以得到我们上传的图片
&& && 顺便说一句,当解析通知传来的字典时要注意解析的方式是否正确，否则会报错的。标签：
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！