vue论坛实现图片发表

图片上传功能实现

在Vue论坛中实现图片发表功能，需要使用文件上传组件结合后端API。通过<input type="file">元素或第三方库如vue-upload-component实现前端上传。

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*">
    <button @click="submitImage">发表图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageFile: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.imageFile = event.target.files[0]
    },
    async submitImage() {
      const formData = new FormData()
      formData.append('image', this.imageFile)

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

图片预览功能

在上传前提供图片预览功能可提升用户体验。通过FileReader API读取文件并显示预览。

<template>
  <div>
    <input type="file" @change="previewImage">
    <img v-if="imageUrl" :src="imageUrl" width="200">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0]
      if (file && file.type.match('image.*')) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.imageUrl = e.target.result
        }
        reader.readAsDataURL(file)
      }
    }
  }
}
</script>

图片压缩处理

大尺寸图片上传前进行压缩可减少服务器负载。使用canvas API实现客户端压缩。

compressImage(file, quality = 0.8) {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (event) => {
      const img = new Image()
      img.src = event.target.result
      img.onload = () => {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        canvas.width = img.width
        canvas.height = img.height
        ctx.drawImage(img, 0, 0)
        canvas.toBlob(
          (blob) => resolve(blob),
          'image/jpeg',
          quality
        )
      }
    }
  })
}

后端API接口

需要配置后端接收图片的API接口。以Node.js Express为例：

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

app.post('/api/upload', upload.single('image'), (req, res) => {
  // 处理上传的文件
  const filePath = req.file.path
  // 保存文件信息到数据库
  res.json({ 
    success: true,
    url: `/uploads/${req.file.filename}`
  })
})

图片展示处理

上传后需要在论坛中展示图片。根据存储方式不同，可采用直接链接或通过API获取。

<template>
  <div v-for="post in posts" :key="post.id">
    <p>{{ post.content }}</p>
    <img v-if="post.image" :src="post.image.url" alt="帖子图片">
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    }
  },
  async created() {
    const response = await axios.get('/api/posts')
    this.posts = response.data
  }
}
</script>

图片上传限制

添加文件类型和大小限制可防止滥用。

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

  if (!validTypes.includes(file.type)) {
    alert('仅支持JPEG、PNG、GIF格式')
    return
  }

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

  this.imageFile = file
}