<input class="input" type="file" @input="uploadFile">如何获取上传的文件
时间: 2023-07-21 12:02:24 浏览: 53
要获取上传的文件,你可以使用 JavaScript 中的 `FileReader` 对象。以下是一个示例:
```html
<input class="input" type="file" @change="uploadFile">
<script>
function uploadFile(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function() {
const fileData = reader.result;
// 在这里可以对文件数据进行处理或发送到服务器
console.log(fileData);
}
reader.readAsDataURL(file);
}
</script>
```
在上面的示例中,我们给文件输入框添加了 `@change` 事件监听器,并调用了 `uploadFile` 函数来处理文件上传。
在 `uploadFile` 函数中,我们首先获取上传的文件对象 `event.target.files[0]`。然后创建了一个 `FileReader` 对象,并定义了它的 `onload` 事件处理函数。
在 `onload` 事件处理函数中,我们可以通过 `reader.result` 获取到文件的数据。在这个示例中,我们使用了 `console.log` 打印文件数据,你可以根据需要对文件数据进行处理或发送到服务器。
最后,通过调用 `reader.readAsDataURL(file)` 方法来读取文件数据。这里使用的是 `readAsDataURL` 方法,它会将文件内容读取为 Data URL 格式,你也可以根据需求选择其他的读取方法。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)