在 Vue 中实现点击普通按钮上传文件

在 Vue 组件的模板中添加一个 元素,类型设置为 file。将该输入框隐藏起来,并添加一个普通的按钮用于触发文件选择。

在组件的 methods 中添加一个方法,用于处理文件选择事件。在该方法中,获取选中的文件,并使用 FormData 对象构建上传数据。
使用 axios 或 fetch 发送 HTTP 请求将数据上传到服务器。

以下是一个示例代码:

<template><div><input type="file" ref="fileInput" @change="handleFileUpload" style="display: none;"><button @click="triggerFileUpload">上传文件</button></div>
</template><script>
import axios from 'axios'export default {name: 'FileUpload',data() {return {allowedFileTypes: ['image/jpeg', 'image/png', 'application/pdf'],maxFileSize: 5 * 1024 * 1024 // 5MB}},methods: {triggerFileUpload() {this.$refs.fileInput.click()},handleFileUpload(event) {const file = event.target.files[0]// 验证文件类型const fileType = file.name.split(".").pop().toLowerCase();if (!this.allowedFileTypes.includes(fileType)) {this.$message.error("错误: 不支持的文件类型。");return}// 验证文件大小if (file.size > this.maxFileSize) {this.$message.error(`错误: 文件大小超过 ${this.maxFileSize / (1024 * 1024)}MB 限制。`);return}const formData = new FormData()formData.append('file', file)// 测试用,项目中换成自己的上传接口axios.post('/upload', formData).then(response => {this.$message.success("文件上传成功。");console.log('文件上传成功:', response.data)}).catch(error => {this.$message.error("文件上传失败。");console.error('文件上传失败:', error)})}}
}
</script>

在这个示例中,我们在组件的 data 中添加了两个属性: allowedFileTypes 和 maxFileSize。这两个属性分别用于存储允许上传的文件类型和最大文件大小。

在 handleFileUpload 方法中,我们首先检查选中的文件是否符合允许的文件类型。如果不符合,则显示一个警告消息并返回。然后,我们检查文件大小是否超过了最大值。如果超过,则同样显示一个警告消息并返回。只有在文件类型和大小都满足要求的情况下,才会继续构建 FormData 对象并发送上传请求。