图片存储,可以存云上,前端将图片传给后端,后端以数据流的形式传到云空间;
图片存储,也可以存项目里的一个特定文件夹下,不必再在云上存储(备份除外);
七牛云 Node.js SDK 官方说明:https://developer.qiniu.com/kodo/sdk/1289/nodejs
技术框架:https://github.com/TaleLin/lin-cms-vue
上传的关键代码 file.js
前端
<input type="file" name="file" @change="fileChange" accept=".png,.jpg,.jpeg">
前端是拿不到图片的本地磁盘路径的,只有一个类似的 webkitRelativePath 还是空串。
fileChange(e){ const fileMsg = e.target.files[0]; console.log(fileMsg); },
查资料有人说能拿到,给的方法试过,还有浏览器兼容问题,然而并不能得到磁盘绝对路径。
//图片路径
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if(window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
以下示例代码(测试环境),是将图片先存在项目本地,拿到一个绝对的存储的地址,再使用七牛云接口上传云空间。
'use strict';
const {LinRouter,ParametersException} = require('lin-mizar');
const {LocalUploader} = require('../../extensions/file/local-uploader');
const path = require('path');
const qiniu = require("qiniu");
const file = new LinRouter({prefix: '/cms/file'});
file.post('/', async ctx => {
const files = await ctx.multipart();
if (files.length < 1) {
throw new ParametersException({
msg: '未找到符合条件的文件资源'
});
}
const uploader = new LocalUploader();
const arr = await uploader.upload(files);
console.log(arr);
ctx.json(arr);
const accessKey = '这里填入ak';
const secretKey = '这里填入sk';
var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const bucket = 'room930'; //要上传的空间
var options = {scope: bucket};
var putPolicy = new qiniu.rs.PutPolicy(options);
var uploadToken = putPolicy.uploadToken(mac);
var key = files[0].filename;
var localFile = path.resolve(__dirname,'../../assets/',arr[0].path);
console.log("=========localFile========");
console.log(localFile);
console.log("=========localFile========");
var putExtra = new qiniu.form_up.PutExtra();
const config = new qiniu.conf.Config()
var formUploader = new qiniu.form_up.FormUploader(config);
// 文件上传
formUploader.putFile(uploadToken, key, localFile, putExtra, function (err, ret) {
if (!err) {
// 上传成功, 处理返回值
console.log(ret.hash, ret.key, ret.persistentId);
} else {
// 上传失败, 处理返回代码
console.log(err);
}
});
});
module.exports = {
file
};
备注:
上传的本地图片地址像这样的不行 http://localhost:5000/assets/2019/11/27/26ed361d-b0e5-4058-a309-97c7334a6b47.jpg
需要是这样的 /Users/mumu/starter/app/assets/2019/11/27/26ed361d-b0e5-4058-a309-97c7334a6b47.jpg
图片上传七牛云后获取图片下载地址
//七牛云图片文件的下载地址 空间域名+文件名称 只适用于公开空间
arr[i].url = '空间域名'+key;
https://developer.qiniu.com/kodo/sdk/1289/nodejs#6
七牛云提供的测试域名,有效期有限,还是需要绑定自己的域名。
如果只买了一个域名,可以用二级域名(随便定义)来绑定,不能直接用主域名绑定,会和域名服务商的域名解析冲突。
一级域名有备案,二级域名无需备案。
私有空间和空开空间,只在读取数据的时候有区别,私有空间需要鉴权,其他修改和删除操作一样。