文件上传分为两步：一、获取文件内容。二、请求接口，将内容放在 body 中发送给后端
一、获取文件内容
上传页面如下
<input type="file" @change="fileChange">
进度：<span id="progress"></span>
js代码：读取当前上传的文件内容用于展示或其他用途
fileChange (e) {
const progress = document.getElementById('progress')
const files = e.target.files
if (files.length > 0) {
const file = files[0] // 当前操作的文件对象
const reader = new FileReader()
if (/text+/.test(file.type)) {
// text类型
reader.readAsText(file, 'utf-8')
} else if (/image+/.test(file.type)) {
// image类型
reader.readAsDataURL(file)
}
// 读取完成，可以做数据处理
reader.onload = function () {
console.log(this.result) // 文件内容
}
// 上传进度
reader.onprogress = ev => {
if (ev.lengthComputable) {
progress.innerHTML = ev.loaded / ev.total
}
console.log(ev.total) // 总大小
console.log(ev.loaded) // 已经上传的大小
}
}
}
这里用到了FileReader类来读取文件，下面简单介绍一下FileReader类的属性和方法
FileReader读取文件方法如下：
-
readAsText(file, encoding)：将文件读取为文本，其中第二个参数是文本的编码方式，默认值为 UTF-8 -
readAsDataUrl(file): 将文件读取为DataURL -
readAsBinaryString(file): 将文件读取为二进制字符串 -
readAsArrayBuffer(file): 将文件读取为ArrayBuffer
PS: 以上读取到的结果都会保存在result属性中，如果读取失败，则 result 的值为 null ，否则即是读取的结果。
FileReader的事件如下：
-
onloadstart: 开始 -
onprogress: 正在读取，每隔50ms左右，会触发一次progress事件 -
onload: 读取成功 -
onloadend：读取完成，无论成功失败 -
onerror: 读取出错
二、将内容通过接口上传至后端
示例：
fetch("http://xxxx.xxx", { // 发起请求
method: "post",
body: fileData,
Headers: {
"X-CSRFToken": "xxxxxx", // 与后端商量好的请求头
"......": "......"
}
}).then(res => {
if (res.status !== 200) {
console.log("上传失败", res)
} else {
console.log("上传成功", res)
}
})
注意事项：
- 方法一般为POST
-
Headers: 一般为用户信息的验证，所需字段需要与后端约定好 -
body：上传的文件数据，一般为文件对象，即file。有时需要FormData 类型的，就转一下：
fileChange (e) {
const file = e.target.files[0]
const formData = new FormData();
formData.append('file', file)
// 这只是个简单的例子
reqwest({
url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
method: 'post',
data: formData,
success: () => {
// 成功
},
error: () => {
// 失败
},
})
}
