在写管理系统时,里面有一个上传图片的功能。
一开始我觉得这对于我一个前端好像有点太难了,因为我不知道图片这类资源一般是存在什么地方的,后来百度了一下,发现可以存在新浪云上,恰好,我新浪云也有账号。
在新浪云官网上,注册登录。当然,有微博账号的可以直接登录进去。
在控制台中,选择云储存SCS
。
创建一个新的bucket。(p.s 话说在一定空间内的使用好像是免费的,多划算啊…)
然后在获取自己的accessKey和secretKey。
新浪这边,在这里,就算结束了。
node项目里面,分别安装中间件multer
和新浪云储存sdkscs-sdk
。
npm install multer
npm install scs-sdk
首先要新建一个scs.json,新浪云配置文件
{
"accessKeyId": "1h2ucbdcjpu8N3yj8Zwd",
"secretAccessKey": "c945e2953658b6d69dfd6144a6e6b53892e17689",
"sslEnabled": true
}
然后,在app.js
或者相应的文件里调用。
//multer中间件引用
const multer = require('multer')
//新浪sdk引用
const sinaCloud = require('scs-sdk')
//这里还需要调用一个路径解析模块
const pathLib = require("path");
//传入配置好的scs.json文件,这里面主要放新浪云的accessKey和secretKey
sinaCloud.config.loadFromPath('./config/scs.json')
const uploads = multer({
dest:'./uploads'
})
//定义一个图片上传的临时目录,本地的
//实例化新浪云储存
const s3 = new sinaCloud.S3();
//上传方法
app.post('/upload/imgs', uploads.single('file'), (req, res) => {
//uploads.single 是一次只传一张图片
var pathNew = req.file.path + pathLib.parse(req.file.originalname).ext;
//这是新的文件名
console.log(pathNew);
fs.rename(req.file.path, pathNew, function (err) {
if (err) {
res.send("上传失败");
} else {
let fileName = pathNew;
let remoteFilename = req.file.originalname;
var fileBuffer = require('fs').readFileSync(fileName);
//上传文件
s3.putObject({
ACL: 'public-read',
Bucket: 'yang47/imgs', //上传至yang47文件夹里的imgs文件夹里
Key: remoteFilename,
Body: fileBuffer
}, function(error, response) {
if (error) {
console.log(error);
} else {
//上传图片成功,将图片地址返回给前端
let path = "http://sinacloud.net/yang47/imgs/"+remoteFilename;
resData.data = path
res.json(resData)
console.log('uploaded file[' + fileName + '] to [' + remoteFilename + ']');
}
});
}
});
})
到这里,差不多就结束了。
上传一张图片,本地uploads文件夹里留一张,新浪云储存里再留一张
所有的与上传部分的代码都在这里,与官方可能略有出入,写的不好,请见谅。