vue实现文件的上传

文件上传的基本实现

在Vue中实现文件上传通常结合HTML的<input type="file">元素和FormData对象。通过监听文件选择事件获取文件对象，再通过AJAX或axios发送到服务器。

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

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

      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>

多文件上传实现

支持同时选择多个文件上传需要添加multiple属性并处理文件数组。

<input type="file" multiple @change="handleMultiFileChange" />

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

    // 其余上传逻辑与单文件相同
  }
}

文件预览功能

在上传前提供文件预览可以提升用户体验，特别是图片文件。

methods: {
  handleFileChange(event) {
    const file = event.target.files[0]
    this.selectedFile = file

    if (file.type.startsWith('image/')) {
      const reader = new FileReader()
      reader.onload = (e) => {
        this.previewUrl = e.target.result
      }
      reader.readAsDataURL(file)
    }
  }
}

进度条显示

大文件上传时显示进度条有助于用户了解上传状态。

async uploadFile() {
  const config = {
    headers: { 'Content-Type': 'multipart/form-data' },
    onUploadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
      this.uploadProgress = percentCompleted
    }
  }

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

文件验证

在上传前进行文件类型和大小验证可以防止无效上传。

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

    if (!validTypes.includes(file.type)) {
      throw new Error('不支持的文件类型')
    }

    if (file.size > maxSize) {
      throw new Error('文件大小超过限制')
    }

    return true
  },
  handleFileChange(event) {
    try {
      const file = event.target.files[0]
      this.validateFile(file)
      this.selectedFile = file
    } catch (error) {
      alert(error.message)
      event.target.value = '' // 清除选择
    }
  }
}

拖拽上传实现

拖拽上传提供更直观的用户体验，需要处理拖放事件。

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

methods: {
  handleDrop(event) {
    const files = event.dataTransfer.files
    if (files.length) {
      this.selectedFile = files[0]
    }
  }
}

第三方库集成

对于更复杂的需求，可以集成专门的文件上传库如vue-dropzone或v-uploader。

安装vue-dropzone：

npm install vue2-dropzone

使用示例：

import vue2Dropzone from 'vue2-dropzone'

export default {
  components: {
    vueDropzone: vue2Dropzone
  },
  data() {
    return {
      dropzoneOptions: {
        url: '/api/upload',
        thumbnailWidth: 150,
        maxFilesize: 5, // MB
        headers: { 'Authorization': 'Bearer ' + token }
      }
    }
  }
}

<vue-dropzone 
  id="dropzone" 
  :options="dropzoneOptions"
  @vdropzone-success="uploadSuccess"
></vue-dropzone>

以上方法涵盖了Vue中实现文件上传的主要场景和技术要点，开发者可根据具体需求选择适合的实现方式。