vue 实现file上传图片

实现文件上传图片功能

在Vue中实现文件上传图片功能，可以通过以下步骤完成：

HTML部分

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*">
    <button @click="uploadFile">上传图片</button>
    <img v-if="imageUrl" :src="imageUrl" alt="上传的图片">
  </div>
</template>

JavaScript部分

<script>
export default {
  data() {
    return {
      file: null,
      imageUrl: ''
    }
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0]
      this.previewImage()
    },
    previewImage() {
      if (this.file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.imageUrl = e.target.result
        }
        reader.readAsDataURL(this.file)
      }
    },
    uploadFile() {
      if (!this.file) return

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

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

使用第三方库简化实现

对于更复杂的文件上传需求，可以使用vue-dropzone等第三方库：

安装依赖：

npm install vue2-dropzone

使用示例：

<template>
  <vue-dropzone 
    ref="myVueDropzone" 
    id="dropzone" 
    :options="dropzoneOptions"
    @vdropzone-success="uploadSuccess"
  ></vue-dropzone>
</template>

<script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'

export default {
  components: {
    vueDropzone: vue2Dropzone
  },
  data() {
    return {
      dropzoneOptions: {
        url: 'https://httpbin.org/post',
        thumbnailWidth: 150,
        maxFilesize: 0.5,
        acceptedFiles: 'image/*',
        addRemoveLinks: true
      }
    }
  },
  methods: {
    uploadSuccess(file, response) {
      console.log('文件上传成功', response)
    }
  }
}
</script>

服务器端处理

Node.js Express示例处理上传的图片：

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

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

app.post('/api/upload', upload.single('image'), (req, res) => {
  console.log(req.file)
  res.json({ 
    message: '文件上传成功',
    filename: req.file.filename 
  })
})

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

图片预览与验证

在客户端添加图片验证逻辑：

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

    // 验证文件类型
    if (!file.type.match('image.*')) {
      alert('请选择图片文件')
      return
    }

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

    this.file = file
    this.previewImage()
  }
}

多文件上传支持

修改代码支持多文件上传：

<input type="file" @change="handleFileUpload" accept="image/*" multiple>

data() {
  return {
    files: []
  }
},
methods: {
  handleFileUpload(event) {
    this.files = Array.from(event.target.files)
    this.previewImages()
  },
  previewImages() {
    this.imageUrls = []
    this.files.forEach(file => {
      const reader = new FileReader()
      reader.onload = (e) => {
        this.imageUrls.push(e.target.result)
      }
      reader.readAsDataURL(file)
    })
  }
}