![cover](https://img-blog.csdnimg.cn/e387f5a4b5da41d0b4d290f0c73edff0.png)
在前端端使用vue+axios上传文件,在服务端使用express+fs接收并保存文件
大致流程如下1. 我们使用vue提供的ref属性来获得标签的dom对象2. 该dom对象的files属性数据类型为FileList,为input的文件信息3. 遍历FileList,得到File对象,使用FileReader读取File对象,获得该文件的ArrayBuffer对象4. 把ArrayBuffer对象转换为数组,使用post请求发送给后端。(题外话:后端拿到ArrayBuffer对象也
前端
大致流程如下
- 我们使用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)
更多推荐
所有评论(0)