vue实现上传封面

使用 Vue 实现上传封面功能

文件上传组件

在 Vue 中可以使用 <input type="file"> 结合 FileReader 实现文件上传预览功能。创建一个基础组件：

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

<script>
export default {
  data() {
    return {
      selectedFile: null,
      imageUrl: ''
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      if (file) {
        this.selectedFile = file
        const reader = new FileReader()
        reader.onload = (e) => {
          this.imageUrl = e.target.result
        }
        reader.readAsDataURL(file)
      }
    },
    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)
      }
    }
  }
}
</script>

后端接口处理

需要后端提供一个接收文件的接口，以下是 Node.js Express 的示例：

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

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

app.post('/api/upload', upload.single('file'), (req, res) => {
  res.json({
    url: `/uploads/${req.file.filename}`,
    originalname: req.file.originalname
  })
})

图片裁剪与优化

对于封面图片，通常需要限制尺寸和比例。可以使用第三方库如 cropperjs：

<template>
  <div>
    <input type="file" @change="initCropper" accept="image/*">
    <div class="cropper-container">
      <img id="image" src="">
    </div>
    <button @click="cropImage">裁剪并上传</button>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  methods: {
    initCropper(event) {
      const file = event.target.files[0]
      if (file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          const image = document.getElementById('image')
          image.src = e.target.result
          this.cropper = new Cropper(image, {
            aspectRatio: 16 / 9
          })
        }
        reader.readAsDataURL(file)
      }
    },
    cropImage() {
      this.cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData()
        formData.append('file', blob, 'cover.jpg')
        // 上传逻辑同上
      })
    }
  }
}
</script>

上传进度显示

使用 axios 的 onUploadProgress 可以显示上传进度：

uploadFile() {
  const config = {
    headers: { 'Content-Type': 'multipart/form-data' },
    onUploadProgress: progressEvent => {
      const percent = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
      console.log(`上传进度: ${percent}%`)
    }
  }

  axios.post('/api/upload', formData, config)
    .then(response => {
      console.log('上传完成')
    })
}

文件类型和大小验证

在客户端添加验证逻辑：

handleFileChange(event) {
  const file = event.target.files[0]
  if (!file) return

  const validTypes = ['image/jpeg', 'image/png']
  const maxSize = 2 * 1024 * 1024 // 2MB

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

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

  // 处理有效文件
}

以上方法组合使用可以实现完整的封面上传功能，包括文件选择、预览、裁剪、验证和上传进度显示。