Heim > Web-Frontend > js-Tutorial > So verwenden Sie Express für den Datei-Upload im Knotenprojekt

So verwenden Sie Express für den Datei-Upload im Knotenprojekt

青灯夜游
Freigeben: 2023-03-28 19:28:19
nach vorne
1725 Leute haben es durchsucht

怎么处理文件上传?下面本篇文章给大家介绍一下node项目中如何使用express来处理文件的上传,希望对大家有所帮助!

So verwenden Sie Express für den Datei-Upload im Knotenprojekt

上传单个文件

我们可以使用 express 官方出品的第三方中间件 multer 来处理,先是安装:

1

npm i multer

Nach dem Login kopieren

然后我先放段比较完整的代码,之后解释:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

const express = require('express')

const multer = require('multer')

const app = express()

 

const upload = multer({ dest: './uploads' })

 

app.post('/upload', upload.single('file'), (req, res) => {

  console.log(req.file)

  res.end('上传成功')

})

 

app.listen(4396, () => {

  console.log('服务器开启')

})

Nach dem Login kopieren

引入后的 multer 为一个函数,执行它得到 upload 对象,执行时可以传入配置,比如设置 dest (destination 的缩写) 为 './uploads',用于指定上传后的文件的存放位置: 【相关教程推荐:nodejs视频教程编程教学

1

const upload = multer({ dest: './uploads' })

Nach dem Login kopieren

由于对上传文件的处理并不是普遍需要的,所以对 upload 的使用是直接在匹配上传路径(我们定义为 '/upload')和方法(一般为 POST)的 app.post('/upload', ) 内,处理的是单个文件上传,所以使用 upload.single() 方法,传入的 'file'(自定义,也可以为其它名字) 为上传文件时的 key:

So verwenden Sie Express für den Datei-Upload im Knotenprojekt

其执行会返回一个中间件函数,将得到的文件的数据赋值到 req.file,而文本字段的信息则会放在 req.body 中,并调用 next(),这样我们就可以接着注册一个中间件,打印查看文件信息,并向客户端返回请求结果 :

1

2

3

4

5

app.post('/upload', upload.single('file'), (req, res) => {

  console.log(req.body)

  console.log(req.file)

  res.end('上传成功')

})

Nach dem Login kopieren

发起上传请求后,打印得到的 req.body 如下:

1

[Object: null prototype] { name: 'jay' }

Nach dem Login kopieren

注意,如果请求的 body 使用 form-data 格式携带的数据里没有文件,而仅仅是一些文本字段,则 upload.single('file') 可以换成 upload.any()

打印得到的 req.file 如下:

1

2

3

4

5

6

7

8

9

10

{

  fieldname: 'file',

  originalname: 'So verwenden Sie Express für den Datei-Upload im Knotenprojekt',

  encoding: '7bit',

  mimetype: 'image/png',

  destination: './uploads',

  filename: '4c5781db70269d90cc57249e95a28894',

  path: 'uploads\\4c5781db70269d90cc57249e95a28894',

  size: 904454

}

Nach dem Login kopieren

并且文件会存储在 uploads 目录下:

So verwenden Sie Express für den Datei-Upload im Knotenprojekt

可以看到,文件名为哈希值,且没有后缀,在 vscode 里无法直接查看图片:

So verwenden Sie Express für den Datei-Upload im Knotenprojekt

但图片文件是可用的,使用 ps 是可以直接打开查看的。那如果想让文件存储时的文件名是添加后缀的,要怎么办呢?解决方案是在执行 const upload = multer() 时,传入的配置对象不再设置 dest 的值而改为设置 storage

1

2

3

4

5

6

7

8

9

const storage = multer.diskStorage({

  destination(req, file, cb) {

    cb(null, './uploads')

  },

  filename(req, file, cb) {

    cb(null, Date.now() + '-' + file.originalname)

  }

})

const upload = multer({ storage })

Nach dem Login kopieren

storage 对象由 multer.diskStorage() 生成,其内部传入对象,该对象有两个方法属性,它们都有 3 个参数,请求对象 req,文件信息 file,和一个回调函数 cb

  • destination 就是配置文件存储路径的,其作用等同于之前直接往 multer() 传入的 { dest: './uploads' },存储路径通过 cb 的第二个参数传入,cb 的第一个参数可以传 Error 对象或直接传 null
  • filename 就可以用来自定义文件名,因为 file.originalname 也就是上传的文件的原来的文件名,其是带有后缀的,所以我们在它前面加个时间戳来作为存储时的文件名。

现在再次发送上传文件请求,存储到 uploads 目录下的文件就有带后缀名了,可以直接在 vscode 打开查看:

So verwenden Sie Express für den Datei-Upload im Knotenprojekt

上传多个文件

如果请求一次性上传多个文件,则只需要将 upload.single('file') 替换为 upload.array('files', 3) 即可,传入参数意为上传时文件的 key 为 files(自定义的,也可以是其它名字),并且限制最多上传 3 张图片,得到的文件信息可以在下一个中间件函数的 req.files 获取:

1

2

3

4

app.post('/upload', upload.array('files', 3), (req, res) => {

  console.log(req.files)

  res.end('上传成功')

})

Nach dem Login kopieren

当我们一次上传多个文件时:

So verwenden Sie Express für den Datei-Upload im Knotenprojekt

打印 req.files 得到的就是个数组了:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

[

  {

    fieldname: 'files',

    originalname: 'So verwenden Sie Express für den Datei-Upload im Knotenprojekt',

    encoding: '7bit',

    mimetype: 'image/png',

    destination: './uploads',

    filename: '1676958850980-So verwenden Sie Express für den Datei-Upload im Knotenprojekt',

    path: 'uploads\\1676958850980-So verwenden Sie Express für den Datei-Upload im Knotenprojekt',

    size: 904454

  },

  {

    fieldname: 'files',

    originalname: 'qrcode.png',

    encoding: '7bit',

    mimetype: 'image/png',

    destination: './uploads',

    filename: '1676958850986-qrcode.png',

    path: 'uploads\\1676958850986-qrcode.png',

    size: 1076

  }

]

Nach dem Login kopieren

将文件部署为静态资源

可以使用内置的 express.static('./uploads') 中间件函数将存储上传文件的 uploads 目录设置为静态资源。然后传给 app.use()

1

app.use(express.static('./uploads'))

Nach dem Login kopieren

这样我们就可以直接通过浏览器查看上传得到的文件了,比如 uploads 有张图片如下:

So verwenden Sie Express für den Datei-Upload im Knotenprojekt

只需要在浏览器输入 localhost:4396/1677031777791-So verwenden Sie Express für den Datei-Upload im Knotenprojekt 即可查看。

更多node相关知识,请访问:nodejs 教程

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Express für den Datei-Upload im Knotenprojekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage