vue实现图片上传删除

2026-02-24 09:48:48VUE

图片上传与删除的实现

在Vue中实现图片上传和删除功能，通常需要结合HTML的<input type="file">元素和后端API。以下是一个完整的实现方案：

前端实现

模板部分

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

    <div v-for="(image, index) in images" :key="index">
      <img :src="image.url" width="200" />
      <button @click="deleteImage(image.id)">删除</button>
    </div>
  </div>
</template>

脚本部分

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

    async uploadImage() {
      if (!this.selectedFile) return

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

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        this.images.push(response.data)
        this.selectedFile = null
      } catch (error) {
        console.error('上传失败:', error)
      }
    },

    async deleteImage(id) {
      try {
        await axios.delete(`/api/images/${id}`)
        this.images = this.images.filter(img => img.id !== id)
      } catch (error) {
        console.error('删除失败:', error)
      }
    },

    async fetchImages() {
      try {
        const response = await axios.get('/api/images')
        this.images = response.data
      } catch (error) {
        console.error('获取图片失败:', error)
      }
    }
  },

  mounted() {
    this.fetchImages()
  }
}
</script>

后端API实现（Node.js示例）

上传接口

const express = require('express')
const multer = require('multer')
const fs = require('fs')
const path = require('path')

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

app.post('/api/upload', upload.single('image'), (req, res) => {
  const tempPath = req.file.path
  const targetPath = path.join(__dirname, 'public/images', req.file.originalname)

  fs.rename(tempPath, targetPath, err => {
    if (err) return res.status(500).send(err)

    res.status(200).json({
      id: Date.now(),
      url: `/images/${req.file.originalname}`
    })
  })
})

删除接口

app.delete('/api/images/:id', (req, res) => {
  // 实际应用中应该根据id查找并删除对应的图片文件
  fs.unlink(path.join(__dirname, 'public/images', req.params.id), err => {
    if (err) return res.status(500).send(err)
    res.status(200).send('图片已删除')
  })
})

功能优化建议

添加图片预览功能，在选择文件后立即显示缩略图：

methods: {
  handleFileUpload(event) {
    const file = event.target.files[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        this.previewImage = e.target.result
      }
      reader.readAsDataURL(file)
      this.selectedFile = file
    }
  }
}

在模板中添加预览区域：

<img v-if="previewImage" :src="previewImage" width="200" />

注意事项

文件上传需要处理跨域问题，可以在后端添加CORS支持：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
  next()
})

对于生产环境，建议添加文件类型验证、大小限制和错误处理机制，确保系统安全稳定。

vue实现图片上传删除