vue实现上传功能

实现文件上传功能

在Vue中实现文件上传功能可以通过结合HTML的<input type="file">元素和JavaScript的FormData对象来完成。以下是一个基本的实现方法：

创建文件上传组件模板

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

处理文件选择和上传

在Vue组件的script部分添加处理逻辑：

<script>
export default {
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0]
    },
    async uploadFile() {
      if (!this.selectedFile) {
        alert('请先选择文件')
        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>

添加进度显示

如果需要显示上传进度，可以修改上传方法：

async uploadFile() {
  // ...之前的代码

  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}%`)
        // 可以在这里更新UI显示进度
      }
    })
    console.log('上传成功:', response.data)
  } catch (error) {
    console.error('上传失败:', error)
  }
}

多文件上传支持

如果需要支持多文件上传，可以修改文件选择和上传逻辑：

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

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

  // 其余上传逻辑相同
}

文件类型和大小限制

可以在文件选择时添加验证：

handleFileChange(event) {
  const file = event.target.files[0]
  const validTypes = ['image/jpeg', 'image/png']
  const maxSize = 2 * 1024 * 1024 // 2MB

  if (!validTypes.includes(file.type)) {
    alert('仅支持JPEG和PNG格式')
    return
  }

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

  this.selectedFile = file
}

使用第三方库

对于更复杂的需求，可以考虑使用专门的文件上传库如vue-upload-component或dropzone：

import VueUploadComponent from 'vue-upload-component'

export default {
  components: {
    'file-upload': VueUploadComponent
  },
  // 其他组件逻辑
}

<file-upload
  url="/api/upload"
  v-model="files"
  @input-filter="inputFilter"
  @input-file="inputFile"
></file-upload>