vue实现上传预览功能

使用 input[type="file"] 和 FileReader 实现基础预览

在 Vue 中创建一个文件上传组件，通过 input 标签的 change 事件获取文件对象。使用 FileReader 读取文件内容并转换为可预览的 URL。

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

<script>
export default {
  data() {
    return {
      previewUrl: null
    };
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file && file.type.match('image.*')) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.previewUrl = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    }
  }
};
</script>

使用 URL.createObjectURL 优化性能

对于大型文件，FileReader 可能较慢。URL.createObjectURL 能直接生成临时 URL，性能更好，但需手动释放内存。

methods: {
  handleFileChange(event) {
    if (this.previewUrl) {
      URL.revokeObjectURL(this.previewUrl); // 释放之前的 URL
    }
    const file = event.target.files[0];
    if (file && file.type.match('image.*')) {
      this.previewUrl = URL.createObjectURL(file);
    }
  }
},
beforeUnmount() {
  if (this.previewUrl) {
    URL.revokeObjectURL(this.previewUrl); // 组件卸载时清理
  }
}

支持多文件预览

通过 v-for 循环展示多个文件的预览，适用于多文件上传场景。

<template>
  <div>
    <input type="file" multiple @change="handleFileChange" accept="image/*">
    <div v-for="(url, index) in previewUrls" :key="index">
      <img :src="url" alt="Preview" style="max-width: 200px;">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrls: []
    };
  },
  methods: {
    handleFileChange(event) {
      this.previewUrls = [];
      Array.from(event.target.files).forEach(file => {
        if (file.type.match('image.*')) {
          this.previewUrls.push(URL.createObjectURL(file));
        }
      });
    }
  },
  beforeUnmount() {
    this.previewUrls.forEach(url => URL.revokeObjectURL(url));
  }
};
</script>

集成第三方库 vue-dropzone

对于复杂需求（如拖拽上传、进度条），可使用 vue-dropzone 库。

安装依赖：

npm install vue2-dropzone

示例代码：

<template>
  <vue-dropzone
    ref="myDropzone"
    id="dropzone"
    :options="dropzoneOptions"
    @vdropzone-success="handleSuccess"
  ></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,
        autoProcessQueue: false,
        addRemoveLinks: true
      }
    };
  },
  methods: {
    handleSuccess(file, response) {
      console.log('File uploaded:', file);
    }
  }
};
</script>

自定义样式与交互

通过 CSS 美化上传区域，添加加载状态和错误处理。

<template>
  <div class="upload-container">
    <label class="upload-label">
      <input type="file" hidden @change="handleFileChange">
      <span v-if="!previewUrl">点击上传</span>
      <img v-else :src="previewUrl" alt="Preview">
    </label>
    <div v-if="error" class="error-message">{{ error }}</div>
  </div>
</template>

<style scoped>
.upload-label {
  display: block;
  width: 200px;
  height: 200px;
  border: 2px dashed #ccc;
  text-align: center;
  line-height: 200px;
  cursor: pointer;
}
.upload-label img {
  max-width: 100%;
  max-height: 100%;
}
.error-message {
  color: red;
}
</style>