vue实现上传文件

2026-03-30 03:30:16VUE

使用 Vue 实现文件上传

Vue 可以通过原生 HTML 的 <input type="file"> 结合 FormData 实现文件上传功能。以下是实现步骤和代码示例：

基础文件上传实现

在 Vue 组件中添加文件输入控件：

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

在脚本部分处理文件选择和上传：

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

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

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

使用第三方库优化

对于更复杂的上传需求，可以使用 vue-upload-component 等专门的上传组件：

安装组件库：
```
npm install vue-upload-component
```

在组件中使用：


<template>
<file-upload
 :post-action="'/upload'"
 @input-file="onInputFile"
 @input-filter="onInputFilter"
></file-upload>
</template>

import FileUpload from 'vue-upload-component'

export default { components: { FileUpload }, methods: { onInputFile(newFile, oldFile) { // 文件变化处理 }, onInputFilter(newFile, oldFile, prevent) { // 文件过滤 } } }

```

服务器端处理示例

Node.js Express 服务器接收文件的示例代码：

vue实现上传文件

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

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({ filename: req.file.filename })
})