写点什么

Node.js 实现存储服务的上传功能【包含前后端代码】

用户头像
liuzhen007
关注
发布于: 3 小时前
Node.js 实现存储服务的上传功能【包含前后端代码】

问题


解决


结尾

问题

上传和下载功能是存储服务非常基础的功能,也是存储服务日常使用过程中最常用的功能,比如阿里云的 OSS、腾讯云的 COS、百度云的 BOS 等。当然,我们也可以自己研发私有化的对象存储服务,那么就会涉及到除了自己处理客户端逻辑外,还需要自己处理服务器的上传和下载逻辑。


今天的问题就是讨论如何实现自定义的上传功能,涉及前端代码和后端代码。

解决

上传功能

前端实现本地上传的方式大体有两种,一种是原生的 ajax 方式,另一种是借助第三方工具,比如 axios 等。

前端代码

方法一、


接下来,先介绍 ajax 的使用方式,首先创建一个 FormDate 对象,将待上传文件关联到 file 参数中,最后把 FormDate 对象赋值到 data 参数中进行上传发送。以下是实例代码(建议根据自己的实际情况进行修改):


var formdata = new FormData();formdata.append("file", file);$.ajax({    type: 'post',    dataType: 'json',    url: uploadurl    data: formdata,    contentType: false,    processData: false}).success((data) => {
}).error((data, timeout, err) => {
})
复制代码


方法二、


现在,我们介绍一下如何利用第三方工具 axios 实现上传功能,同样,先创建一个 FormData 对象,给对应的 file 表单项赋值,然后调用 axios 的 post 方法就行了。以下是实例代码(建议根据自己的实际情况进行修改):


let formData=new FormData();formData.append('file',file);let config = {    headers: {        'Content-Type': 'multipart/form-data;charset=UTF-8'    }};
axios.post(uploadurl,formData,config).then(({data})=>{});
复制代码

后端代码

Node.js 处理服务端的上传逻辑时,一般可以考虑 multer 中间件,它是用于处理文件上传的利器,主要跟 express 框架搭配使用,但是,仅支持表单 MIME 编码为 multipart/form-data 类型的数据请求。


实例代码:


var multer = require('multer');var storage = multer.diskStorage({  destination: function (req, file, cb) {    var type = file.mimetype.split("/")[0];    switch(type){      case "image":        cb(null, './images');        break;      case "audio":      case "video":        cb(null, './movies');        break;      default:        cb(null, './uploads');    }  },  filename: function (req, file, cb) {    cb(null, file.originalname);  }});var upload = multer({  storage: storage});
// apiapp.post("/api/upload", upload.single('file'), Admincontroller.postupload);
// postuploadexports.postupload = function (req, res) { // 解决跨域问题 res.header("Access-Control-Allow-Origin", "*") res.header("Access-Control-Allow-Methods", "*") res.header("Access-Control-Allow-Headers", "*") res.header("Access-Control-Allow-Credentials", "true") res.header("Cache-Control", "no-cache") res.header("content-type", "application/json;charset=UTF_8")
if ("OPTIONS" == req.method) { console.log("===> options reqest"); res.body = 200; return; }
var file = req.file; console.log("===> upload file: " + JSON.stringify(file)) var body = req.body; console.log("===> upload body: " + JSON.stringify(body)) ...... // 处理音视频类型的文件 case 0: // 视频 case 1: // 音频 default: //视频 音频 { var des = "./movies/"; var trans = body.dtranscode; var taskId = body.id; file.path = des + filename; file.originalname = filename; var filearr = filename.split("."); filearr.pop(); var path = filearr.join('.'); var tmppath = des + path; var exitst = fs.existsSync(tmppath); if (!exitst) { fs.mkdirSync(tmppath); } var newfilename = filename + body.dzchunkindex; fs.renameSync(file.path, tmppath + "/" + newfilename); if (body.dzchunkindex * 1 + 1 == body.dztotalchunkcount * 1) { var files = fs.readdirSync(tmppath); for (var i = 0; i < files.length; i++) { fs.appendFileSync(file.path + "", fs.readFileSync(tmppath + "/" + filename + i)); fs.unlinkSync(tmppath + "/" + filename + i); } fs.rmdirSync(tmppath); } return res.json({ code: 0, success: 1 }); }
复制代码

结尾

基于 Node.js 实现存储服务的上传功能就介绍差不多了,明天,我们讲一讲下载的问题。大家好,我是 liuzhen007,中国邦德,中国一个会敲代码的邦德,欢迎大家关注我。


发布于: 3 小时前阅读数: 5
用户头像

liuzhen007

关注

敲代码,搞开发。 2021.05.01 加入

本人深耕音视频技术,走全栈路线,前后端通吃,兼顾各端与流媒体服务器。 博客主页地址:https://liuzhen.blog.csdn.net 微信公众号:玩转音视频 欢迎交流学习!

评论 (1 条评论)

发布
用户头像
8 月日更第七天!
3 小时前
回复
没有更多了
Node.js 实现存储服务的上传功能【包含前后端代码】