vue 实现上传图片

使用 Vue 实现图片上传功能

基本实现步骤

创建一个简单的文件上传组件，使用 <input type="file"> 元素来接收用户选择的图片文件。在 Vue 组件中，通过 @change 事件监听文件选择。

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

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

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

      // 这里替换为你的API端点
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        console.log('上传成功', response.data)
      })
      .catch(error => {
        console.error('上传失败', error)
      })
    }
  }
}
</script>

图片预览功能

在用户选择图片后立即显示预览，提升用户体验。使用 FileReader API 读取文件并转换为 base64 字符串。

<template>
  <div>
    <input type="file" accept="image/*" @change="handleFileUpload" />
    <img v-if="imagePreview" :src="imagePreview" alt="预览" style="max-width: 300px; max-height: 300px;" />
    <button @click="uploadImage">上传图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
      imagePreview: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0]
      this.createImagePreview(this.selectedFile)
    },
    createImagePreview(file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        this.imagePreview = e.target.result
      }
      reader.readAsDataURL(file)
    },
    // uploadImage 方法同上
  }
}
</script>

使用第三方库优化上传

对于更复杂的需求，可以使用专门的文件上传库如 vue-upload-component 或 v-file-input。

安装 v-file-input:

npm install v-file-input

使用示例:

<template>
  <div>
    <v-file-input
      accept="image/*"
      label="选择图片"
      prepend-icon="mdi-camera"
      @change="handleFileUpload"
    ></v-file-input>
    <v-btn @click="uploadImage">上传</v-btn>
  </div>
</template>

服务器端处理

确保服务器端正确处理 multipart/form-data 请求。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) => {
  console.log(req.file) // 上传的文件信息
  res.json({ message: '文件上传成功', file: req.file })
})

进度显示

添加上传进度显示功能，提升用户体验:

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

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

  axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress: progressEvent => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      )
      console.log(percentCompleted) // 可以绑定到data属性显示进度条
    }
  })
  .then(response => {
    console.log('上传成功', response.data)
  })
  .catch(error => {
    console.error('上传失败', error)
  })
}

文件验证

添加文件类型和大小验证:

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

  // 验证文件类型
  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif']
  if (!allowedTypes.includes(file.type)) {
    alert('只支持JPEG、PNG和GIF格式的图片')
    return
  }

  // 验证文件大小 (2MB)
  const maxSize = 2 * 1024 * 1024
  if (file.size > maxSize) {
    alert('图片大小不能超过2MB')
    return
  }

  this.selectedFile = file
  this.createImagePreview(file)
}