图片存储，可以存云上，前端将图片传给后端，后端以数据流的形式传到云空间；

图片存储，也可以存项目里的一个特定文件夹下，不必再在云上存储（备份除外）；

七牛云 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

七牛云提供的测试域名，有效期有限，还是需要绑定自己的域名。

如果只买了一个域名，可以用二级域名（随便定义）来绑定，不能直接用主域名绑定，会和域名服务商的域名解析冲突。

一级域名有备案，二级域名无需备案。

私有空间和空开空间，只在读取数据的时候有区别，私有空间需要鉴权，其他修改和删除操作一样。

七牛云图片上传 Node.js SDK

上传的关键代码 file.js

猜你喜欢