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

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

问题

解决

结尾

问题

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

解决

上传功能

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

前端代码

方法一、

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

varformdata=newFormData();
formdata.append("file", file);
$.ajax({
type: 'post',
dataType: 'json',
url: uploadurldata: formdata,
contentType: false,
processData: false}).success((data) => {
}).error((data, timeout, err) => {
})

方法二、

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

letformData=newFormData();
formData.append('file',file);
letconfig= {
headers: {
'Content-Type': 'multipart/form-data;charset=UTF-8'    }
};
axios.post(uploadurl,formData,config).then(({data})=>{
});

后端代码

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

实例代码:

varmulter=require('multer');
varstorage=multer.diskStorage({
destination: function (req, file, cb) {
vartype=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);
  }
});
varupload=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;
  }
varfile=req.file;
console.log("===> upload file: "+JSON.stringify(file))
varbody=req.body;
console.log("===> upload body: "+JSON.stringify(body))
......// 处理音视频类型的文件case0: // 视频case1: // 音频default: //视频 音频      {
vardes="./movies/";
vartrans=body.dtranscode;
vartaskId=body.id;
file.path=des+filename;
file.originalname=filename;
varfilearr=filename.split(".");
filearr.pop();
varpath=filearr.join('.');
vartmppath=des+path;
varexitst=fs.existsSync(tmppath);
if (!exitst) {
fs.mkdirSync(tmppath);
        }
varnewfilename=filename+body.dzchunkindex;
fs.renameSync(file.path, tmppath+"/"+newfilename);
if (body.dzchunkindex*1+1==body.dztotalchunkcount*1) {
varfiles=fs.readdirSync(tmppath);
for (vari=0; i<files.length; i++) {
fs.appendFileSync(file.path+"", fs.readFileSync(tmppath+"/"+filename+i));
fs.unlinkSync(tmppath+"/"+filename+i);
          }
fs.rmdirSync(tmppath);
        }
returnres.json({
code: 0,
success: 1        });
      }

结尾

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



作者简介:😄大家好,我是 Data-Mining(liuzhen007),是一位典型的音视频技术爱好者,前后就职于传统广电巨头和音视频互联网公司,具有丰富的音视频直播和点播相关经验,对 WebRTC、FFmpeg 和 Electron 有非常深入的了解,😄公众号:玩转音视频。同时也是 CSDN 博客专家、华为云享专家(共创编辑)、InfoQ 签约作者,欢迎关注我分享更多干货!😄

目录
相关文章
|
15天前
|
JavaScript 前端开发 Python
用python执行js代码:PyExecJS库
文章讲述了如何使用PyExecJS库在Python环境中执行JavaScript代码,并提供了安装指南和示例代码。
65 1
用python执行js代码:PyExecJS库
|
1月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实战指南
【9月更文挑战第6天】在数字化时代的潮流中,后端开发作为支撑现代Web和移动应用的核心,其重要性不言而喻。本文将深入浅出地介绍如何使用Node.js及其流行的框架Express来搭建一个高效、可扩展的后端服务。通过具体的代码示例和实践技巧,我们将探索如何利用这两个强大的工具提升开发效率和应用性能。无论你是后端开发的新手还是希望提高现有项目质量的老手,这篇文章都将为你提供有价值的见解和指导。
|
11天前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
13天前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
14天前
|
存储 JavaScript 前端开发
webSocket+Node+Js实现在线聊天(包含所有代码)
文章介绍了如何使用WebSocket、Node.js和JavaScript实现在线聊天功能,包括完整的前端和后端代码示例。
65 0
|
11天前
|
存储 JavaScript 前端开发
改进JavaScript代码,给水果有序赋色
改进JavaScript代码,给水果有序赋色
|
13天前
|
存储 JSON JavaScript
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇在JavaScript中编写一个用于快递自动分拣的代码,区分省份、市区、县、城乡镇,通常意味着你需要一个数据结构来存储这些地理区域的信息,并编写逻辑来根据快递地址中的信息将其分配到正确的分类中。 这里,我将提供一个简化的示例,说明如何使用JavaScript对象和函数来实现这一功能。请注意,这个示例是高度简化的,并且假设你已经有了某种方式(如正则表达式或API调用)来从快递地址中提取省份、市区、县等信息。 ----------------------------------- ©著作权归作者所有:来自51CTO博客作者goS
|
14天前
|
JavaScript 前端开发 Python
python执行js代码
本文档详细介绍如何安装Node.js环境及PyExecJS库,并提供示例代码展示其功能。首先,通过指定链接安装Node.js,安装完毕后可在命令行中输入`node --version`来验证安装是否成功。接着,使用`pip install PyExecJS`安装PyExecJS库,该库允许Python程序执行JavaScript代码。文档还提供了多个示例代码,展示了如何在Python环境中执行和编译JavaScript代码,并可以选择特定的JavaScript运行时环境,如Node.js或JScript。最后,通过具体案例展示了PyExecJS的功能与使用方法。
16 3
|
16天前
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
25 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
|
16天前
|
SQL JavaScript 关系型数据库
Node服务连接Mysql数据库
本文介绍了如何在Node服务中连接MySQL数据库,并实现心跳包连接机制。
29 0
Node服务连接Mysql数据库