vue实现上传

2026-01-07 21:06:01VUE

Vue 文件上传实现方法

使用 Vue 实现文件上传可以通过原生 HTML5 的 <input type="file"> 元素结合 Vue 的事件处理和数据绑定来实现。

基础实现步骤

创建文件上传组件模板

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

处理文件选择和上传逻辑

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0]
    },
    async submitFile() {
      if (!this.file) return

      const formData = new FormData()
      formData.append('file', this.file)

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

使用第三方库实现更复杂功能

对于需要更复杂功能的场景，可以使用专门的 Vue 上传组件库：

vue-upload-component

npm install vue-upload-component

基本用法示例

<template>
  <file-upload
    :post-action="'/upload'"
    @input-file="onInputFile"
    @input-filter="onInputFilter"
  ></file-upload>
</template>

<script>
import FileUpload from 'vue-upload-component'

export default {
  components: {
    FileUpload
  },
  methods: {
    onInputFile(newFile, oldFile) {
      // 文件变化处理
    },
    onInputFilter(newFile, oldFile) {
      // 文件过滤
    }
  }
}
</script>

实现拖拽上传功能

通过 HTML5 拖放 API 实现拖拽上传：

<template>
  <div 
    @dragover.prevent
    @drop.prevent="handleDrop"
    class="drop-zone"
  >
    拖拽文件到此处上传
  </div>
</template>

<script>
export default {
  methods: {
    handleDrop(e) {
      const files = e.dataTransfer.files
      if (files.length) {
        this.uploadFiles(files)
      }
    },
    uploadFiles(files) {
      // 上传逻辑
    }
  }
}
</script>

<style>
.drop-zone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}
</style>

上传进度显示

使用 Axios 的 onUploadProgress 显示上传进度：

methods: {
  async uploadWithProgress() {
    const config = {
      onUploadProgress: progressEvent => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        )
        console.log(percentCompleted)
        // 更新进度条状态
      }
    }

    await axios.post('/upload', formData, config)
  }
}

文件验证和限制

在上传前验证文件类型和大小：

methods: {
  validateFile(file) {
    const validTypes = ['image/jpeg', 'image/png']
    const maxSize = 2 * 1024 * 1024 // 2MB

    if (!validTypes.includes(file.type)) {
      alert('请上传JPEG或PNG图片')
      return false
    }

    if (file.size > maxSize) {
      alert('文件大小不能超过2MB')
      return false
    }

    return true
  },

  handleFileUpload(event) {
    const file = event.target.files[0]
    if (this.validateFile(file)) {
      this.file = file
    }
  }
}

多文件上传实现

支持同时上传多个文件：

<template>
  <input type="file" multiple @change="handleMultipleFiles" />
</template>

<script>
export default {
  methods: {
    handleMultipleFiles(event) {
      const files = Array.from(event.target.files)
      files.forEach(file => {
        const formData = new FormData()
        formData.append('files[]', file)
        axios.post('/upload', formData)
      })
    }
  }
}
</script>