vue 怎么实现上传

2026-01-15 22:45:07VUE

Vue 实现文件上传的方法

使用原生 HTML5 文件上传

通过 <input type="file"> 元素结合 Vue 的数据绑定实现基础文件上传功能。

<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() {
      if (!this.file) return

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

      // 使用 axios 或其他 HTTP 库发送请求
      axios.post('/api/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 库提供了现成的上传组件。

Element UI 示例:

<template>
  <el-upload
    action="/api/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 isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message.error('只能上传 JPG 格式图片')
      }
      return isJPG
    },
    handleSuccess(response, file) {
      this.$message.success('上传成功')
    }
  }
}
</script>

处理多文件上传

通过 multiple 属性允许选择多个文件，并循环处理。

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

<script>
methods: {
  handleMultipleFiles(event) {
    const files = Array.from(event.target.files)
    const formData = new FormData()

    files.forEach(file => {
      formData.append('files[]', file)
    })

    axios.post('/api/multi-upload', formData)
  }
}
</script>

显示上传进度

利用 axios 的 onUploadProgress 回调显示上传进度。

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 + '%')
  }
})

后端接收示例（Node.js Express）

const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file) // 上传的文件信息
  res.send('文件上传成功')
})

这些方法涵盖了从基础到进阶的文件上传实现方式，可根据项目需求选择适合的方案。

vue 怎么实现上传