[JavaScript知识库]在前端端使用vue+axios上传文件，在服务端使用express+fs接收并保存文件

前端

大致流程如下

1. 我们使用vue提供的ref属性来获得<input type=“file”>标签的dom对象
2. 该dom对象的files属性数据类型为FileList，为input的文件信息
3. 遍历FileList，得到File对象，使用FileReader读取File对象，获得该文件的ArrayBuffer对象
4. 把ArrayBuffer对象转换为数组，使用post请求发送给后端。（题外话：后端拿到ArrayBuffer对象也能保存文件，但很怪的一点是，如果这里把ArrayBuffer对象直接塞到post参数里，后端会收到一个空对象，但很明显ArrayBuffer并不是一个空对象。所以这里我先把他转换为数组，然后把数组送到后端。）

<template>
  <label><input type="file" ref="input" multiple>文件</label>
  <button @click="submit">提交文件</button>
</template>

<script lang="ts" setup>
  import {ref} from 'vue'
  import axios from 'axios'
  const input = ref<any>()
  function submit(){
    const files = input.value.files as FileList
    for(let i = 0; i < files.length; i++){
      const file = files[i]
      const fileReader = new FileReader()
      fileReader.readAsArrayBuffer(file)
      //文件读取完毕触发onload事件
      
      fileReader.onload = () => {
        //把ArrayBuffer对象转换为数组
        const arrayBuffer = Array.from(new Uint8Array(fileReader.result as ArrayBuffer))
        axios.post('http://localhost:9000/submitFile', {fileName:file.name, arrayBuffer:arrayBuffer})
        .then(() => {console.log(file.name + '上传成功')})
      }
    }
  }
</script>

服务端

服务端流程就比较简单了，值得注意的有两点，一是解析body的中间件body-parser默认有大小限制100kb，当大小超过100kb就会报错，我们要手动去设置这个上限；二是注意fs.writeFile()的使用，它的第二个参数接受一个Buffer数据类型，注意Buffer.from()的用法，他的参数是字符串，缓冲区，数组或arrayBuffer。

const express = require('express')
const cors = require('cors')
const fs = require('fs')
const bodyParser = require('body-parser')
const app = express()

app.use(cors()) //允许简单请求和非简单请求的跨域

//解析Content-Type:application/x-www-form-urlencoded的body
app.use(bodyParser.urlencoded({
    extended: false,
    limit: '50mb' //body大小限制值，默认是100kb，但很多文件都大于100kb所以需要手动修改
}))

//解析Content-Type:application/json的body
app.use(bodyParser.json({limit: '50mb' })) //同理提高大小限制

const basePath = './' //规定保存文件的路径

app.post('/submitFile', (req, res) => {
    //把接收到的内容写入文件，Buffer.from()接收一个数组作为参数
    fs.writeFile(basePath + req.body.fileName, Buffer.from(req.body.arrayBuffer), error => {
        console.log(error)
    })
})
app.listen(9000)

更规范化的文件上传

前端使用FormData

上面的方式是自己瞎摸索的，我网上搜了下很少有人那样传文件，而且如果使用第三方云端存储库的话，比如网上的图床和对象存储云服务，它们提供的api也不支持那样的传输方式。

更加规范的文件上传方式应该是将File对象传递给后端，但上面已经说了，直接把File对象粗鲁地塞到post参数里是不行的，我们要使用FormData对象来构建请求参数，使用formData.append()方法把file对象加到参数里，文件的内容会以二进制的形式添加到请求参数中。同时要把请求头的’Content-Type’字段设置为 ‘multipart/form-data’，一些第三方的ajax库如axios会自动帮我们做这种设置。

//file是一个File对象
//"fieldname"须和后端multer里的参数保持一致
formData.append("fieldname", file, file.name)
axios.post('/upload', formData)

后端express使用中间件multer

multer基本使用方法如下：

const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors()) //允许简单请求和非简单请求的跨域

//引入multer
const multer = require("multer");

//在storage里定义文件的保存路径file.destination和文件名file.filename
//这里的req.body还未解析，为空。但req.query参数已解析，可用。这里的req.file为undefined
const storage = multer.diskStorage({

    destination: function (req, file, cb) {
        // console.log(req.body) 
        //cb函数设置保存路径，__dirname为当前文件所在目录
        cb(null, __dirname) 
    },

    filename: function (req, file, cb) {
        // console.log(req.body)   
        //获得文件名最后一个小数点的位置
        let indexOfPoint = file.originalname.lastIndexOf('.')
        //获得文件扩展名
        let fileExtention = file.originalname.slice(indexOfPoint)
        if(indexOfPoint === -1){
            fileExtention = ''
        }
        //文件名 = 时间戳 + 扩展名
        let filename = new Date().getTime() + fileExtention
        //cb函数设置filename
        cb(null, filename) 
    }
})


// 创建multer实例对象
const upload = multer({ storage: storage});

//upload.single()参数是请求里面二进制对应的属性名，须和前端保持一致
app.post('/submitFile', upload.single("fieldname"), (req, res) => {
    //文件保存操作由multer在后台自动执行，我们无需关心。
    //在这里一般是向前端返回文件的保存信息，如文件名和文件保存位置，文件的url路径等。
    //file.originalname指文件的原始名字，file.filename是我们在上面storage中指定的名字
    res.end(JSON.stringify({name: req.file.filename, path: req.file.path}))
})

app.listen(9000)