一、Vue中的文件选择
在前端开发中,经常需要上传文件,所以文件选择功能就很必要。在Vue中,有几种方式来实现文件选择。
1. input标签
<input type="file" @change="handleFileUpload">
methods: {
handleFileUpload(e) {
const file = e.target.files[0];
console.log(file);
},
}
使用input标签可以很方便地实现文件选择功能。通过监听change事件,可以获取到用户选择的文件。这种方式的缺点是,不能自定义按钮的样式。
2. Vue组件库
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-success="onSuccess">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
methods: {
onSuccess(response, file, fileList) {
console.log(response, file, fileList);
},
}
Vue的组件库中,常常包含了文件选择功能。例如ElementUI的el-upload组件。通过配置action属性,可以指定文件上传的url,通过on-success事件,可以获取到上传成功后的响应数据。
二、文件的读取和处理
文件选择之后,我们还需要读取文件内容,或者对文件进行处理。以下是几种实现方式。
1. FileReader对象
<input type="file" @change="handleFileUpload">
methods: {
handleFileUpload(e) {
const fileReader = new FileReader();
fileReader.readAsText(e.target.files[0]);
fileReader.onload = e => {
console.log(e.target.result);
};
},
}
FileReader对象可以读取文件内容。通过调用readAsText方法,可以读取文本文件的内容。读取完成后,通过onload事件获取到文件的内容。
2. 文件上传和处理库
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-success="onSuccess"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
import XLSX from 'xlsx';
export default {
methods: {
beforeUpload(file) {
const fileType = file.type;
const isExcel = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].indexOf(fileType) !== -1;
const size = file.size / 1024 / 1024;
if (!isExcel || size > 5) {
this.$message.error('只支持上传 smaller than 5MB 的Excel文件');
return false;
}
const fileReader = new FileReader();
fileReader.readAsBinaryString(file);
fileReader.onload = e => {
const binaryString = e.target.result;
const workbook = XLSX.read(binaryString, { type: 'binary' });
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const data = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
console.log(data);
};
return false;
},
onSuccess(response, file, fileList) {
console.log(response, file, fileList);
},
},
};
</script>
对于特定类型的文件,我们可能需要进行一些特殊处理,例如读取Excel文件。这时可以使用一些文件上传和处理库,如xlsx、pdfjs等。上述代码中,使用了xlsx库,读取Excel文件的具体过程如下:
- 使用FileReader对象读取文件内容,读取方式为二进制字符串。
- 使用xlsx库的read方法,将二进制字符串转换成workbook对象。
- 获取到workbook对象中的worksheet,使用sheet_to_json方法获取到文件内容。
三、文件上传
文件选择和处理之后,还需要将文件上传到服务器。以下是文件上传的几种实现方式。
1. 原生XMLHttpRequest对象
methods: {
handleFileUpload(e) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.onload = () => {
console.log(xhr.responseText);
};
const formData = new FormData();
formData.append('file', e.target.files[0]);
xhr.send(formData);
},
}
使用原生XMLHttpRequest对象可以很方便地上传文件。通过FormData对象,可以将文件放入请求体中,发送到服务器。使用onload方法监听异步上传完成的事件。
2. axios
methods: {
handleFileUpload(e) {
const formData = new FormData();
formData.append('file', e.target.files[0]);
axios.post('/upload', formData)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
},
}
axios是一款流行的HTTP请求库,也可以用于文件上传。使用FormData对象将文件放入请求体中,axios会自动将请求头设置为multipart/form-data类型。
3. Vue组件库
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-success="onSuccess">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
methods: {
onSuccess(response, file, fileList) {
console.log(response, file, fileList);
},
}
Vue的组件库中,常常包含了文件上传功能。例如ElementUI的el-upload组件。通过配置action属性,可以指定文件上传的url,通过on-success事件,可以获取到上传成功后的响应数据。