使用vue+axios上传文件，服务端使用express+fs接收并保存文件

前端

大致流程如下

我们使用vue提供的ref属性来获得<input type=“file”>标签的dom对象

该dom对象的files属性数据类型为FileList，为input的文件信息

遍历FileList，得到File对象，使用FileReader读取File对象，获得该文件的ArrayBuffer对象。 （这里也可以使用FileReader.readAsDataURL()，将该文件转化base64编码的url格式的字符串，然后执行下面步骤传给后端）

把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)
           

更规范化的文件上传

上面的方式是自己瞎摸索的，本质上就是通过file对象读取文件数据，然后把文件的数据转换成数组或者字符串，最后通过post请求传过去。

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

其实更规范的上传文件方式应该是把file对象直接作为post请求参数的值，然后直接将文件传递给后端，不需要对文件的数据进行手动读取或处理。

但之前在尝试的时候，通过浏览器抓包发现，请求参数里的file对象总是一个空对象，之所以会出现这种现象，是因为请求头设置不正确，当上传文件时，我们要把请求头设置为multipart/form-data，这样才能正确上传文件的数据。

前端使用Content-Type=multipart/form-data上传文件

除了请求头不同之外，和其他的普通请求步骤完全相同。我们在上传文件的同时，也可以上传普通类型的参数，比如下面这个例子，参数中的fieldname是文件类型，name是字符串类型。

//file是一个File对象
//name是一个字符串
//"fieldname"须和后端multer里的参数保持一致
axios.post('/upload', {"fieldname":file, "name":name})           

后端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)