NodeJS + Express 文件上传功能

我会带着你远行 2023-10-10 11:33 41阅读 0赞

## NodeJS + Express 文件上传功能 ##

基于node.js express框架，借助multer或connect-multiparty中间件，我们可以实现一个文件上传功能。

下面将利用node.js express框架实现一个文件上传功能，并将上传的文件储存在项目下的tmp文件夹中：

#### 1、使用multer中间件实现 ####

multer中间件是用来处理`multiparty/form-data`类型的表单数据，用于文件上传.

安装文件上传所需模块：npm install body-parser multer

![20200915174542493.png][]

### 2、文件上传项目整体结构: ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

在public下的index.html实现一个表单：

在index.js 编写文件上传接口：

执行`node index.js`代码，在浏览器中访问[http://localhost:3000/index.html][http_localhost_3000_index.html]打开文件上传页面，文件上传成功后，在项目下会出现tmp文件夹，里面就是上传的文件；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1][]

![20200915175020969.png][]

注意的是：文件上传接口在接收到的文件`req.files[0]`的文件名和路径均不带文件后缀名

[20200915174542493.png]: https://img-blog.csdnimg.cn/20200915174542493.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200915174654735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[http_localhost_3000_index.html]: http://localhost:3000/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200915175001782.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[20200915175020969.png]: https://img-blog.csdnimg.cn/20200915175020969.png