vue实现图片管理

2026-02-20 07:29:53VUE

Vue 图片管理实现方案

基于 Vue 的图片管理功能通常包括上传、预览、删除和列表展示等核心功能。以下为常见实现方法：

基础图片上传组件

使用 <input type="file"> 结合 FormData 实现文件上传：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*" multiple>
    <button @click="uploadFiles">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFiles: []
    }
  },
  methods: {
    handleFileChange(e) {
      this.selectedFiles = Array.from(e.target.files)
    },
    async uploadFiles() {
      const formData = new FormData()
      this.selectedFiles.forEach(file => {
        formData.append('images[]', file)
      })

      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>

图片预览功能

使用 URL.createObjectURL 实现本地预览：

<template>
  <div v-for="(file, index) in previewFiles" :key="index">
    <img :src="file.preview" width="100">
    <span>{{ file.name }}</span>
  </div>
</template>

<script>
export default {
  methods: {
    generatePreviews(files) {
      return files.map(file => ({
        file,
        name: file.name,
        preview: URL.createObjectURL(file)
      }))
    },
    handleFileChange(e) {
      this.previewFiles = this.generatePreviews(Array.from(e.target.files))
    }
  },
  beforeDestroy() {
    this.previewFiles.forEach(file => URL.revokeObjectURL(file.preview))
  }
}
</script>

图片列表管理

实现带分页的图片列表展示：

<template>
  <div class="image-grid">
    <div v-for="image in images" :key="image.id" class="image-item">
      <img :src="image.url" @click="showPreview(image)">
      <button @click="deleteImage(image.id)">删除</button>
    </div>
    <Pagination :current="page" :total="total" @change="fetchImages"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      page: 1,
      total: 0
    }
  },
  mounted() {
    this.fetchImages()
  },
  methods: {
    async fetchImages(page = 1) {
      const res = await axios.get(`/api/images?page=${page}`)
      this.images = res.data.items
      this.total = res.data.total
      this.page = page
    },
    async deleteImage(id) {
      await axios.delete(`/api/images/${id}`)
      this.fetchImages(this.page)
    }
  }
}
</script>

第三方组件集成

使用 vue-dropzone 实现拖拽上传：

安装依赖：
```
npm install vue2-dropzone
```

组件实现：


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

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

export default { components: { vueDropzone: vue2Dropzone }, data() { return { dropzoneOptions: { url: '/api/upload', thumbnailWidth: 150, maxFilesize: 2, acceptedFiles: 'image/*', addRemoveLinks: true } } } }

```

图片裁剪功能

使用 vue-cropper 实现：

安装依赖：
```
npm install vue-cropper
```

组件实现：


<template>
<vue-cropper
 ref="cropper"
 :img="imageSrc"
 :autoCrop="true"
 :fixed="true"
 :fixedNumber="[16, 9]"
></vue-cropper>
<button @click="cropImage">裁剪</button>
</template>

import VueCropper from 'vue-cropper' export default { components: { VueCropper }, methods: { cropImage() { this.$refs.cropper.getCropBlob(blob => { const formData = new FormData() formData.append('cropped', blob) axios.post('/api/upload-cropped', formData) }) } } } ```