前端文件上传
2021-10-13 本文已影响0人
程序_影子
文件上传分为两步:一、获取文件内容。二、请求接口,将内容放在 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: () => {
// 失败
},
})
}