在 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 对象并发送上传请求。