Home >Web Front-end >JS Tutorial >Share an example tutorial on using nodejs multer to upload and download files

Share an example tutorial on using nodejs multer to upload and download files

零下一度Original: 2017-05-12 09:46:362143browse

This article mainly introduces nodejs multer implementation file upload and download related information in detail. It has certain reference value and is of interest. Friends can refer to

The example in this article shares the specific code for nodejs to implement file upload and download for your reference. The specific content is as follows

1. Introduction

I made a demo about file upload and download, and chose Multer as the middleware for data processing.

For information about multer, please refer to the Chinese translation document github.com/expressjs/multer/blob/master/doc/README-zh-cn.md or the official document

2 . upload file upload

html It is necessary to set enctype="multipart/form-data" in the form tag so that files can be uploaded using post method when using multer on the server. , basically the same as the official website, citing the middleware multer, app.post('\upload', upload.single('name'), function(){}); specifies a single file upload, the parameter is the name in the HTML input, In this way, the upload can be successful, but the problem is that multer will not care about your suffix. The files uploaded to the upload folder have a scrambled name but no suffix, so I added this function.

req.file is file information, get the original name, get the suffix '.jpg' through array and stack processing, use the fs.renameSync() method to rename the file, and add the original suffix. In this way, the real upload is successful. The only drawback is that the file name is not changed, and an error occurred when using the official website method, so I did not delve into it. .

3.download File download

On the Internet, basically express encapsulates res.download and the fs method. Be careful to download the file. The folder is set to static files. The problem is that after clicking, the file to be downloaded will be displayed on a new page, whether it is a picture or music. . This bothers me a lot, but I haven't found a good solution after searching for a long time. When accessing the results using IE, there will be options to download or view. . Very confusing. Anyway, that’s it, I’m very satisfied with my hard work in one night. . Heehee

Server

//index.js

var fs = require(&#39;fs&#39;)
var express = require(&#39;express&#39;)
var multer = require(&#39;multer&#39;)
const path = require(&#39;path&#39;);

 var app = express();
 var upload = multer({dest:&#39;upload/&#39;});

//多文件上传 （限定上传文件个数）（没有修改后缀）
app.post(&#39;/upload-multi&#39;,upload.array(&#39;myfile&#39;,2),function(req,res,next){
  res.send("2 done");
})
//单文件上传获取信息
app.post(&#39;/upload-single&#39;,upload.single(&#39;myfile&#39;),function(req,res,next){
  var file=req.file;
  // console.log("名称：%s",file.originalname);
  // console.log("mime：%s",file.mimetype);
//以下代码得到文件后缀
  name=file.originalname;
  nameArray=name.split(&#39;&#39;);
  var nameMime=[];
  l=nameArray.pop();
  nameMime.unshift(l);
  while(nameArray.length!=0&&l!=&#39;.&#39;){
  l=nameArray.pop();
  nameMime.unshift(l);
  }
//Mime是文件的后缀
  Mime=nameMime.join(&#39;&#39;);
  console.log(Mime);
  res.send("done");
//重命名文件 加上文件后缀
  fs.renameSync(&#39;./upload/&#39;+file.filename,&#39;./upload/&#39;+file.filename+Mime);

})

//文件下载尝试（chrome会直接在页面上展示。.最后也没有解决）
//设置download文件夹为静态 才能下载
 app.use(&#39;/download&#39;, express.static(path.join(dirname, &#39;download&#39;)));
// app.get(&#39;/download&#39;,function(req,res){
//   var path=&#39;./download/aa.mp3&#39;;
//   res.download(path,&#39;aa.mp3&#39;);
// });
app.get(&#39;/download&#39;, function(req, res){
 var file = dirname + &#39;/download/aa.mp3&#39;;
 res.download(file); 
});
app.get(&#39;/&#39;,function(req,res,next){
  res.sendFile(dirname+"/index.html");
})

app.listen(3000);

Client

//index.html

<!DOCTYPE html>
<html>
<head>
  <title>上传文件</title>
  <meta charset="utf-8">
</head>
<body>
<form enctype="multipart/form-data" action="/upload-single" method="post">
<input type="file" name="myfile"></input>
<input type="submit" value="提交"></input>
</form>

<form enctype="multipart/form-data" action="/upload-multi" method="post">
<input type="file" name="myfile"></input>
<input type="file" name="myfile"></input>
<input type="submit" value="提交"></input>
</form>
<a href="download/aa.mp3" rel="external nofollow" >下载文件</a>
</body>
</html>

[Related recommendations]

1. Free js online video tutorial

2. JavaScript Chinese Reference Manual

3. php.cn Dugu Jiujian (3) - JavaScript Video Tutorial

The above is the detailed content of Share an example tutorial on using nodejs multer to upload and download files. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share an example tutorial on the implementation principle of the image upload component (React + Node)Next article：Share an example tutorial on the implementation principle of the image upload component (React + Node)

See more

Share an example tutorial on using nodejs multer to upload and download files

Related articles