multer实现文件上传功能全解（form上传、fetch请求上传、多文件上传)

目录安装express和multer基础使用配置上传文件名使用fetch上传文件多文件上传
安装express和multer

npm i express multer -S

基础使用

前端表单

enctype必须指定multipart/form-data 因为multer只支持这种。

name的值“logo”对应服务器upload.single中的“logo”。

 form action /postFile method post enctype multipart/form-data 

 input id postFile type file name logo 

 button type submit 上传 /button 

 /form 

后端服务器文件

dest对应上传的文件的目录地址。upload.single的值“logo”对应前端name中的“logo”。

import express from express 

import multer from multer 

const app express()

const upload multer({ dest: uploads/ })

app.post( /postFile , upload.single( logo ), (req, res) {

 res.send(req.file)

app.listen(3000, () {

 console.log( 服务器开启中 )

--

启动服务。

去页面选择文件上传一张图片 上传成功。

配置上传文件名

我们发现虽然上传了 但是文件不是我们想要的样子 没有后缀 也不知道是我们上传的图片文件。

我们可以对multer进行详细的配置。

destination配置上传文件的位置filename配置文件名 可以利用file上传文件的内容进行配置:

import express from express 

import multer from multer 

const app express()

// const upload multer({ dest: uploads/ })

const upload multer({

 storage: multer.diskStorage({

 destination: function (req, file, cb) {

 cb(null, ./uploads/ )

 filename: function (req, file, cb) {

 // fieldname是表单的name值 也就是我们设定的“logo” 

 // originalname是文件上传时的名字 可以根据它获取后缀 

 // encoding mimetype 我就不详细介绍了 可以自行输出查看。

 const { fieldname, originalname, encoding, mimetype } file

 const after originalname.split( . )[1] ? . originalname.split( . )[1] : .jpg 

 cb(null, fieldname after);

app.post( /postFile , upload.single( logo ), (req, res) {

 res.send(req.file)

app.listen(3000, () {

 console.log( 服务器开启中 )

然后我们重启服务器 再上传一次图片 就有了。

使用fetch上传文件

后端问题解决了我们看看前端的问题 表单上传文件不仅拓展差 还会跳转新页面 令人头疼。

我们肯定更希望用js中的fetch手动上传。如果还不会使用fetch可以先移步 fetch异步请求使用详解

我们去掉form表单 自定义一个上传事件。

我的前端页面在8080端口 也做了nginx代理请求到3000端口 你们可以自行修改成自己的请求。

body.append(‘logo’, file)这里的作为key的“logo”代替了原本表单中的name值“logo”的作用。

虽然是post请求 但是不要添加请求头’Content-Type’: ‘multipart/form-data’ 上传文件时post已经自动帮你识别了 再加就要报错了。

 body 

 input id postFile type file name logo 

 button type button onclick upload() 上传 /button 

 /body 

 script 

 const upload async () {

 const body new FormData()

 const file document.getElementById( postFile ).files[0]

 if (file) {

 body.append( logo , file)

 const response await fetch( http://localhost:8080/postFile , {

 method: post ,

 body

 const res await response.json()

 console.log(res)

 } else {

 alert( 请选择文件 )

 /script 

多文件上传

前端表单

input加上multiple 支持多文件。因为现在是多文件了 就不直接取文件 我们先获取用id获取dom 遍历添加进body 记得“logo”要对应后台“logo”。

 body 

 input id postFile type file name logo multiple 

 button type sub onclick upload() 上传 /button 

 /body 

 script 

 const upload async () {

 const body new FormData()

 const postFile document.getElementById( postFile )

 if (postFile.files[0]) {

 for (const file of postFile.files) {

 body.append( logo , file)

 const response await fetch( http://localhost:8080/postFile , {

 method: post ,

 body

 const res await response.json()

 console.log(res)

 } else {

 alert( 请选择文件 )

 /script 

后端服务器文件

upload.single(‘logo’)改成upload.array(‘logo’, 3) 后面的数字是限制上传文件数。命名我们就用本来的名字 好区分不同的文件。

import express from express 

import mysql from mysql 

import multer from multer 

const app express()

// const upload multer({ dest: uploads/ })

const upload multer({

 storage: multer.diskStorage({

 destination: function (req, file, cb) {

 cb(null, ./uploads/ )

 filename: function (req, file, cb) {

 const { fieldname, originalname, encoding, mimetype } file

 // const after originalname.split( . )[1] ? . originalname.split( . )[1] : .jpg 

 cb(null, originalname);

app.post( /postFile , upload.array( logo , 3), (req, res) {

 res.send(req.files)

app.listen(3000, () {

 console.log( 服务器开启中 )

大功告成 有帮助的话不妨点个赞吧 如果有什么问题可以评论区提出 会及时更新解决。

【uniapp小程序】uploadFile文件上传 上节中我们讲到小程序的request请求，掌握了基本的网络请求方式，这节我们通过小程序的uploadFile接口能力完成对小程序上传操作（uni.uploadFile，后端php接口），通过这一节你可以学习到php的上传接口的写法，以及如何配合前端完成一个小程序上传操作✨✨欢迎订阅本专栏或者关注我，大家一起努力每天一题算法题✨✨❤️❤️❤️ 最后，希望我的这篇文章能对你的有所帮助！愿自己还有你在未来的日子，保持学习，保持进步，保持热爱，奔赴山海！❤️❤️❤️。
使用commons-fileupload时，文件上传与表单参数同时提交时的后台代码处理 把Form表单是的enctype= multipart/form-data 是基于流的，只能获取一次，重复获取将为空,当上传文件的input控件与hidden的input字段混合时,直接用request.getParameter一般是不行的.
Element el-upload 文件上传/图片上传/拖拽上传/附带参数/附带请求头部详解 1. 前言 2. 基本用法 2.1 前端部分 2.2 后端部分 2.3 获取后端返回信息 3. 外观功能介绍 3.1 拖拽上传 3.2 显示图片 3.3 设置文件列表样式 3.4 显示提示信息 4. 事件功能介绍 4.1 限制上传文件数量 4.2 限制上传文件类型和大小 4.3 移除文件处理 4.4 手动上传 5. 附带参数 6. 附带请求头部 7. 小结