Exress框架之文件上传

爱被打了一巴掌 2023-01-15 13:22 97阅读 0赞

# 前端文件上传和后端接收文件的操作 #

--------------------

### 文章目录 ###

*  前端文件上传和后端接收文件的操作
 *   *   *  什么是文件上传呢？
         *  前端上传文件的操作
         *   *  表单直接上传文件
             *  原生 js 方式上传文件
             *  jQuery 方式上传文件
         *  后端接收文件的操作
         *   *  单文件上传
             *  单名称多文件上传
             *  多名称多文件上传

### 什么是文件上传呢？ ###

*  在前端把本地的 图片、视频、音频之类的文件发送给服务端，服务端接收这些文件并存储在服务器中，最后将文件地址存储在数据库中。

### 前端上传文件的操作 ###

#### 表单直接上传文件 ####

*  使用 form 标签，from 标签的设置：
    
     *  action => 设置服务器地址
     *  method => POST 方式
     *  enctype => mutilpart/form-data
        
         *  设置请求头 content-type 为 multipart/form-data
         *  multipart=> 设置以二进制流的形式上传
 *  input 标签的设置
    
     *  type => 设置成 file
     *  name => 设置一个名字
 *  代码示例：
    
     *      <form action="服务器的地址" method="POST" enctype="multipart/form-data">
            	<input type="file" name="avatar">
            	<input type="text" name="username">
            	<button>上传</button>
            </form>

#### 原生 js 方式上传文件 ####

*  注意：这里需要使用 HTTP/2.0 的技术
 *  使用一个内置构造函数叫做 FormData()
 *  html 代码示例：
    
     *      <form>
            	<input type="file" name="avatar">
            	<input type="text" name="username">
            	<button>上传</button>
            </form>
 *  原生 js 代码示例：
    
     *      <script>
            	// 获取 form
            	const form = document.querySelector('form')
            	// 绑定 submit 事件
            	form.addEventListener('submit', function(e) {
            		// 这里需要阻止一下表单的默认事件
            		e.preventDefault()
            		// 创建 FormData 构造函数实例并传入form
            		const formData = new FormData(this) // 这里的this指向 form
            		// 下一步就是发送 Ajax 请求
            		const xhr = new XMLHttpRequest()
            		xhr.open('POST', '请求地址')
            		// 将formData作为参数发送到服务端
            		xhr.send(formData)
            		// 、、、下面就是接收结果，我就不敲了
            	})
            </script>
     *  需要注意的是，上面代码示例中使用的是 function 的方式，所以函数内的 this 指向 form，如果你使用 ES6 语法的箭头函数的话，函数内的 this 则会向父级作用域去找。
     *  FormData 具体的使用方法可以在这个地址看一下：[FormData() - Web API 接口参考 | MDN (mozilla.org)][FormData_ - Web API _ _ MDN _mozilla.org]

#### jQuery 方式上传文件 ####

*  使用 jQuery 的方式来上传文件需要注意：
    
     *  FormData 会自动设置请求头，但是 jQuery 也会默认设置请求头，所以我们需要设置：contentType:false
     *  FormData 会方送二进制流的数据格式，但是 jQuery 也会将数据格式化为以 key=value&key=value 的数据格式发送，所以我们需要设置：processData:false 让 jQuery 不需要处理我们的数据，直接上传数据到服务端。
 *  jQuery 代码示例：
    
     *      $('form').submit(function(e) {
            	e.preventDefault()
            	const formData = new FormData($('form')[0])
            	$.ajax({
            		method: 'POST',
            		url: 'http://localhost:2020/upload',
            		data: formData,
            		contentType: false,
            		processData: false,
            		success(res) {
            			console.log(res)
            		}
            	})
            })

### 后端接收文件的操作 ###

*  后端需要先在服务器上准备一个文件夹，用于存储上传的文件；
 *  需要一个叫 multer 的插件来帮助我们后端接收文件的操作
    
     *  npm install multer --save 下载
 *  使用 multer.diskStorage(\{ 配置 \}) 来生成一个仓库信息，返回值是一个仓库信息。以下函数是 diskDtorage 里的成员，这两个函数都有三个参数：req, file, callback
    
     *  req: 本次请求的信息；file: 本次请求的文件，file.fieldname（可以获取到 input 的 name ）；callback: 回调函数，利用回调函数来设定存储路径
     *  => destination: function() \{ \} 设定存储路径
     *  => filename: function() \{ \} 设定文件名称
 *  使用 path 模块中的 path.extname() 方法来获取上传文件的后缀名，然后在 filename方法中进行拼接文件名称。
 *  注意：multer 不需要挂载到服务上，哪个路由需要处理接收文件的操作就将它挂载在哪个路由上就好，写在路由的第二个参数位置，即：路由名后面，路由处理函数前面。在路由处理函数中 req.file 接收单文件信息， req.files 接收多文件信息，根据上传的文件是单文件或多文件选择。
 *  multer 在路由上的使用方法：
    
     *  单文件或单名称多文件：
        
         *  single 方法是专门接收单名称单文件的
         *  array 方法是专门接收单名称多文件的
     *  多名称多文件上传：
        
         *  fields 方法是专门接收多名称多文件的

#### 单文件上传 ####

*  前端代码示例：
    
     *      <body>
              <form action="http://127.0.0.1:2020/upload" method="POST" enctype="multipart/form-data">
                <input type="file" name="avatar">
                <button>上传</button>
              </form>
            </body>
 *  后端代码示例：
    
     *      const express = require('express')
            const path = require('path')
            const cors = require('cors')
            const multer = require('multer')
            
            const app = express()
            const router = express.Router()
            const storage = multer.diskStorage({
            	destintion: (req, file, cb) => {	
            		cb(null, './uploads/')
            	},
            	filename: (req, file, cb) => {
            		const tmp = path.extname(file.originalname)
            		// 拼接上时间戳和随机数，再加上后缀名
            		cb(null, `avatar_${ new Date().getTime() }-${ Math.rander().toString().slice(2) }${ tmp }`)
            	}
            })
            const fileUpload = multer({ storage })
            router
            	.post('/upload', fileUpload.single('avatar'), (req, res) => {
            		console.log(req.file)
            	})
            // 跨域处理
            app.use(cors())
            app.use(router)
            app.listen(2020, () => console.log(' server is running at port 2020 '))

#### 单名称多文件上传 ####

*  前端代码示例：
    
     *      <body>
              <form action="http://127.0.0.1:2020/upload" method="POST" enctype="multipart/form-data">
                <input type="file" multiple name="avatar">
                <button>上传</button>
              </form>
            </body>
 *  后端代码示例：
    
     *      const express = require('express')
            const path = require('path')
            const cors = require('cors')
            const multer = require('multer')
            
            const app = express()
            const router = express.Router()
            
            const storage = multer.diskStorage({
            	destination: (req, file, cb) => {
            		cb(null, './upload/')
            	}
            	filename: (req, file, cb) => {
            		const tmp = path.extname(file.originalname)
            		cb(null, `${ file.fieldname }_${ new Data().getTime() }-${ Math.random().toString().slice(2) }${ tmp }`)
            	}
            })
            
            const fileUpload = multer({ storage })
            router
            	.get('/upload', fileUpload.array('avatar'), (req, res) => {
            		console.log(req.files)
            	})
            
            app.use(cors())
            app.use(router)
            
            app.listen(2020, () => console.log(' server is running at port 2020'))

#### 多名称多文件上传 ####

*  前端代码示例：
    
     *      <body>
              <form action="http://127.0.0.1:2020/upload" method="POST" enctype="multipart/form-data">
                <input type="file" multiple name="avatar">
                <input type="file" nultiple name="photo">
                <button>上传</button>
              </form>
            </body>
 *  后端代码示例：
    
     *      const express = require('express')
            const path = require('path')
            const cors = require('cors')
            const multer = require('multer')
            
            const app = express()
            const router = express.Router()
            
            const storage = multer.diskStorage({
            	destination: (req, file, cb) => {
            		if( file.fieldname === 'avatar') {
            			cb(null, './uploads/avatar/')
            		}
            		if( file.fieldname === 'photo') {
            			cb(null, './upload/photo/')
            		}
            	}
            	filename: (req, file, cb) => {
            		const tmp = path.extname(file.originalname)
            		cb(null, `${ file.fieldname }_${ new Data().getTime() }-${ Math.random().toString().slice(2) }${ tmp }`)
            	}
            })
            
            const fileUpload = multer({ storage })
            router
            	.get('/upload', fileUpload.fields([
            		{ name: 'avatar' },
            		{ name: 'photo' }
            	]), (req, res) => {
            		console.log(req.files)
            	})
            
            app.use(cors())
            app.use(router)
            
            app.listen(2020, () => console.log(' server is running at port 2020'))

***小怪留言：有些知识点比较少用到，忘记了不可怕，有空回来看看吖***

[FormData_ - Web API _ _ MDN _mozilla.org]: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData