vue 实现file上传图片

2026-01-20 17:58:21VUE

使用 Vue 实现图片上传功能

基础实现步骤

创建文件上传组件在 Vue 项目中创建一个组件用于处理图片上传功能。可以使用 <input type="file"> 元素作为基础。

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

处理文件选择在 methods 中实现 handleFileUpload 方法，获取用户选择的文件。

<script>
export default {
  data() {
    return {
      selectedFile: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0]
    }
  }
}
</script>

图片预览功能

添加预览功能在用户选择图片后显示预览图，可以添加一个 img 标签。

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*">
    <img v-if="imageUrl" :src="imageUrl" width="200">
    <button @click="uploadFile">上传</button>
  </div>
</template>

生成预览 URL 使用 URL.createObjectURL 生成临时 URL 用于预览。

methods: {
  handleFileUpload(event) {
    this.selectedFile = event.target.files[0]
    this.imageUrl = URL.createObjectURL(this.selectedFile)
  }
}

文件上传实现

创建上传方法实现 uploadFile 方法，使用 FormData 发送文件到服务器。

methods: {
  async uploadFile() {
    if (!this.selectedFile) 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)
    }
  }
}

进阶功能

文件类型和大小验证在 handleFileUpload 方法中添加验证逻辑。

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

  if (!validTypes.includes(file.type)) {
    alert('请上传JPEG、PNG或GIF图片')
    return
  }

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

  this.selectedFile = file
  this.imageUrl = URL.createObjectURL(file)
}

多文件上传修改 input 元素和上传逻辑以支持多文件。

<input type="file" @change="handleFileUpload" accept="image/*" multiple>

data() {
  return {
    selectedFiles: []
  }
},
methods: {
  handleFileUpload(event) {
    this.selectedFiles = Array.from(event.target.files)
  },
  async uploadFiles() {
    const formData = new FormData()
    this.selectedFiles.forEach(file => {
      formData.append('files[]', file)
    })

    // 上传逻辑...
  }
}

使用第三方库

使用 vue-upload-component 安装并配置 vue-upload-component 可以简化上传流程。

安装：

npm install vue-upload-component

使用：

<template>
  <file-upload
    @input-file="inputFile"
    :post-action="'/api/upload'"
    :multiple="true"
    :accept="'image/*'"
  ></file-upload>
</template>

<script>
import FileUpload from 'vue-upload-component'
export default {
  components: {
    FileUpload
  },
  methods: {
    inputFile(newFile, oldFile) {
      // 文件变化处理
    }
  }
}
</script>

服务器端处理

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) => {
  res.json({
    url: `/uploads/${req.file.filename}`
  })
})

vue 实现file上传图片