当前位置：首页 > VUE

vue实现上传插件

2026-03-09 00:09:47VUE

Vue 实现文件上传插件的方法

使用原生 input 元素实现基础上传

在 Vue 中可以通过原生 HTML 的 input 元素实现基础文件上传功能。创建一个带有 type="file" 的 input 元素，并监听 change 事件获取用户选择的文件。

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
  </div>
</template>

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const files = event.target.files
      if (files.length > 0) {
        const formData = new FormData()
        formData.append('file', files[0])

        // 发送到服务器
        axios.post('/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
      }
    }
  }
}
</script>

使用第三方上传组件

Vue 生态中有许多成熟的上传组件可供选择，如 vue-upload-component 或 element-ui 的 Upload 组件。

vue实现上传插件

安装 element-ui 上传组件：

npm install element-ui

使用示例：

vue实现上传插件

<template>
  <el-upload
    action="/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <el-button size="small" 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, file, fileList) {
      this.$message.success('上传成功')
    }
  }
}
</script>

自定义上传组件开发

如需完全自定义上传功能，可以创建一个独立的 Vue 组件，包含拖放上传、预览、进度显示等功能。

<template>
  <div class="uploader" @dragover.prevent @drop="handleDrop">
    <div v-if="!file" class="drop-area">
      拖放文件到这里或点击选择
      <input type="file" @change="handleFileChange" />
    </div>
    <div v-else class="file-info">
      <p>{{ file.name }}</p>
      <progress :value="progress" max="100"></progress>
      <button @click="upload">上传</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      progress: 0
    }
  },
  methods: {
    handleDrop(e) {
      e.preventDefault()
      this.file = e.dataTransfer.files[0]
    },
    handleFileChange(e) {
      this.file = e.target.files[0]
    },
    upload() {
      const formData = new FormData()
      formData.append('file', this.file)

      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          this.progress = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          )
        }
      }).then(response => {
        this.$emit('uploaded', response.data)
      })
    }
  }
}
</script>

分片上传实现

对于大文件上传，可以实现分片上传功能以提高可靠性和用户体验。

async function chunkUpload(file, chunkSize = 1024 * 1024) {
  const chunks = Math.ceil(file.size / chunkSize)
  const fileMd5 = await calculateFileMd5(file) // 计算文件MD5

  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('file', chunk)
    formData.append('chunk', i)
    formData.append('chunks', chunks)
    formData.append('md5', fileMd5)

    await axios.post('/upload/chunk', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
  }

  // 通知服务器合并分片
  await axios.post('/upload/merge', {
    name: file.name,
    md5: fileMd5,
    chunks: chunks
  })
}