Vue上传功能实现

2026-02-24 21:45:55VUE

Vue 文件上传功能实现

基础实现（使用原生 `<input type="file">`）

通过 v-on:change 监听文件选择事件，获取 File 对象后通过 FormData 上传：

<template>
  <div>
    <input type="file" @change="handleFileUpload"/>
    <button @click="submitFile">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0]
    },
    async submitFile() {
      const formData = new FormData()
      formData.append('file', this.selectedFile)

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        console.log('上传成功:', response.data)
      } catch (error) {
        console.error('上传失败:', error)
      }
    }
  }
}
</script>

使用第三方库（如 vue-upload-component）

安装组件库：

npm install vue-upload-component

组件实现示例：

Vue上传功能实现

<template>
  <uploader
    :options="options"
    :auto-start="false"
    @file-added="onFileAdded"
  >
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>拖拽文件到此处或</p>
      <uploader-btn>选择文件</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>
</template>

<script>
import { Uploader, UploaderBtn, UploaderDrop, UploaderList } from 'vue-upload-component'

export default {
  components: {
    Uploader,
    UploaderBtn,
    UploaderDrop,
    UploaderList
  },
  data() {
    return {
      options: {
        target: '/api/upload',
        testChunks: false
      }
    }
  },
  methods: {
    onFileAdded(file) {
      file.upload()
    }
  }
}
</script>

进度显示实现

通过 Axios 的 onUploadProgress 回调实现进度监控：

methods: {
  async submitFile() {
    const formData = new FormData()
    formData.append('file', this.selectedFile)

    try {
      const response = await axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
          const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
          console.log(`进度: ${percentCompleted}%`)
          // 可绑定到data中的progress变量显示进度条
        }
      })
    } catch (error) {
      console.error(error)
    }
  }
}

多文件上传实现

修改 handleFileUpload 方法处理多个文件：

Vue上传功能实现

methods: {
  handleFileUpload(event) {
    this.selectedFiles = Array.from(event.target.files)
  },
  async submitFiles() {
    const formData = new FormData()
    this.selectedFiles.forEach(file => {
      formData.append('files[]', file)
    })

    await axios.post('/api/multi-upload', formData)
  }
}

文件类型限制

通过 HTML5 的 accept 属性限制文件类型：

<input 
  type="file" 
  @change="handleFileUpload"
  accept=".jpg,.jpeg,.png,.pdf"
>

或在方法中验证：

handleFileUpload(event) {
  const file = event.target.files[0]
  const allowedTypes = ['image/jpeg', 'image/png']

  if (!allowedTypes.includes(file.type)) {
    alert('仅支持JPEG/PNG格式')
    return
  }
  this.selectedFile = file
}