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 签约作者,欢迎关注我分享更多干货!😄

目录
相关文章
|
30天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
120 58
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
235 2
|
1月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
35 0
|
17天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
35 3
原生js炫酷随机抽奖中奖效果代码
|
13天前
|
JavaScript C++ 容器
【Azure Bot Service】部署NodeJS ChatBot代码到App Service中无法自动启动
2024-11-12T12:22:40.366223350Z Error: Cannot find module 'dotenv' 2024-11-12T12:40:12.538120729Z Error: Cannot find module 'restify' 2024-11-12T12:48:13.348529900Z Error: Cannot find module 'lodash'
37 11
|
16天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
24 2
|
22天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
202 4
|
23天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
76 6
|
20天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
49 1
下一篇
无影云桌面