当前位置：首页 > VUE

vue实现发送图片

2026-01-18 23:33:18VUE

使用 Vue 实现发送图片功能

前端实现（Vue 部分）

模板部分

<template>
  <div>
    <input type="file" accept="image/*" @change="handleImageUpload">
    <button @click="uploadImage">发送图片</button>
    <img v-if="previewImage" :src="previewImage" alt="预览" style="max-width: 300px;">
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      selectedImage: null,
      previewImage: null
    }
  },
  methods: {
    handleImageUpload(event) {
      const file = event.target.files[0]
      if (file && file.type.match('image.*')) {
        this.selectedImage = file

        // 创建预览
        const reader = new FileReader()
        reader.onload = (e) => {
          this.previewImage = e.target.result
        }
        reader.readAsDataURL(file)
      }
    },
    async uploadImage() {
      if (!this.selectedImage) return

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

      try {
        const response = await fetch('你的上传API地址', {
          method: 'POST',
          body: formData
        })

        if (response.ok) {
          const result = await response.json()
          console.log('上传成功:', result)
          // 处理成功后的逻辑
        } else {
          console.error('上传失败')
        }
      } catch (error) {
        console.error('上传出错:', error)
      }
    }
  }
}
</script>

后端处理（Node.js 示例）

Express 服务器端代码

const express = require('express')
const multer = require('multer')
const app = express()

// 配置存储
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname)
  }
})

const upload = multer({ storage: storage })

app.post('/upload', upload.single('image'), (req, res) => {
  if (!req.file) {
    return res.status(400).send('没有上传文件')
  }

  res.json({
    success: true,
    imageUrl: `/uploads/${req.file.filename}`
  })
})

app.listen(3000, () => console.log('服务器运行在3000端口'))