vue实现添加图片

使用 v-model 和 FileReader 实现图片上传

在 Vue 中可以通过 input 标签的 type="file" 结合 FileReader 实现图片上传功能。以下是一个基础实现示例：

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*">
    <img v-if="imageUrl" :src="imageUrl" alt="Preview" style="max-width: 300px;">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = (e) => {
        this.imageUrl = e.target.result
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

使用第三方库 vue-upload-component

对于更复杂的需求，可以使用专门的上传组件库：

npm install vue-upload-component

<template>
  <file-upload
    :extensions="['jpg', 'jpeg', 'png']"
    :post-action="'/upload/url'"
    @input-file="onFileChange"
  ></file-upload>
</template>

<script>
import FileUpload from 'vue-upload-component'

export default {
  components: {
    FileUpload
  },
  methods: {
    onFileChange(file) {
      if (file && file.url) {
        console.log('Uploaded file URL:', file.url)
      }
    }
  }
}
</script>

表单提交时上传图片

如果需要将图片随表单一起提交：

<template>
  <form @submit.prevent="submitForm">
    <input type="file" ref="fileInput" @change="handleFileChange">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: new FormData()
    }
  },
  methods: {
    handleFileChange() {
      const file = this.$refs.fileInput.files[0]
      this.formData.append('image', file)
    },
    async submitForm() {
      try {
        const response = await axios.post('/api/upload', this.formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        console.log('Upload success:', response.data)
      } catch (error) {
        console.error('Upload failed:', error)
      }
    }
  }
}
</script>

图片裁剪后上传

使用 vue-cropper 实现图片裁剪：

npm install vue-cropperjs

<template>
  <div>
    <input type="file" @change="setImage">
    <vue-cropper
      v-if="imageSrc"
      ref="cropper"
      :src="imageSrc"
      :aspect-ratio="1"
    ></vue-cropper>
    <button v-if="imageSrc" @click="cropImage">Crop</button>
    <img v-if="croppedImage" :src="croppedImage">
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      imageSrc: '',
      croppedImage: ''
    }
  },
  methods: {
    setImage(e) {
      const file = e.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = (event) => {
        this.imageSrc = event.target.result
      }
      reader.readAsDataURL(file)
    },
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        this.croppedImage = URL.createObjectURL(blob)
        // 可以在这里上传blob对象
      }, 'image/jpeg')
    }
  }
}
</script>

多图片上传实现

实现多图片选择和预览：

<template>
  <div>
    <input type="file" multiple @change="handleMultipleFiles">
    <div v-for="(img, index) in previewImages" :key="index">
      <img :src="img" style="max-width: 100px; margin: 5px;">
      <button @click="removeImage(index)">Remove</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewImages: [],
      files: []
    }
  },
  methods: {
    handleMultipleFiles(event) {
      this.files = Array.from(event.target.files)
      this.previewImages = []

      this.files.forEach(file => {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.previewImages.push(e.target.result)
        }
        reader.readAsDataURL(file)
      })
    },
    removeImage(index) {
      this.previewImages.splice(index, 1)
      this.files.splice(index, 1)
    }
  }
}
</script>