vue 实现上传文件

2026-03-10 10:09:13VUE

Vue 实现文件上传的方法

使用原生 HTML5 文件上传

通过 <input type="file"> 元素结合 Vue 的 v-on 指令实现基础文件上传功能。

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

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

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

使用第三方组件库

Element UI 或 Ant Design Vue 等 UI 库提供了封装好的上传组件。

vue 实现上传文件

Element UI 示例：

vue 实现上传文件

<template>
  <el-upload
    action="/upload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload">
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('文件大小不能超过 2MB')
      }
      return isLt2M
    },
    handleSuccess(response) {
      this.$message.success('上传成功')
    },
    handleError() {
      this.$message.error('上传失败')
    }
  }
}
</script>

拖拽上传实现

通过 HTML5 的拖拽 API 实现更友好的用户体验。

<template>
  <div 
    class="dropzone"
    @drop.prevent="handleDrop"
    @dragover.prevent>
    拖拽文件到此处上传
    <input type="file" @change="handleFileUpload" />
  </div>
</template>

<script>
export default {
  methods: {
    handleDrop(e) {
      this.file = e.dataTransfer.files[0]
      this.uploadFile()
    },
    // 其他方法与第一个示例相同
  }
}
</script>

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

分片上传实现

对于大文件，可以采用分片上传策略提高可靠性。

async function chunkUpload(file) {
  const chunkSize = 1024 * 1024 // 1MB
  const chunks = Math.ceil(file.size / chunkSize)

  for (let i = 0; i < chunks; i++) {
    const start = i * chunkSize
    const end = Math.min(file.size, start + chunkSize)
    const chunk = file.slice(start, end)

    const formData = new FormData()
    formData.append('chunk', chunk)
    formData.append('chunkIndex', i)
    formData.append('totalChunks', chunks)
    formData.append('fileName', file.name)

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

  await axios.post('/merge-chunks', {
    fileName: file.name,
    totalChunks: chunks
  })
}