1. 项目背景

2. 需求分析

  • 支持单张或多张图片上传。
  • 设置图片上传的大小和格式。
  • 显示上传进度和上传结果。
  • 提供图片预览功能。
  • 支持图片删除操作。

3. VueUploader组件简介

  • 支持单张或多张图片上传。
  • 支持设置图片大小和格式。
  • 提供上传进度和上传结果提示。
  • 支持图片预览和删除操作。
  • 支持自定义上传请求和上传结果处理。

4. VueUploader组件使用方法

以下是一个简单的VueUploader组件使用示例：

<template>
  <div>
    <el-upload
      ref="uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
    >
      <el-button slot="trigger" size="small" type="primary">选择图片</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <div>
      <img :src="previewImage" v-if="previewImage" alt="预览图片" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      previewImage: '',
    };
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
        return false;
      }
      const isLt500K = file.size / 1024 / 1024 < 0.5;
      if (!isLt500K) {
        this.$message.error('上传图片大小不能超过 500KB!');
        return false;
      }
      return true;
    },
    handleSuccess(response, file, fileList) {
      this.$message.success('上传成功!');
    },
    handleError(err, file, fileList) {
      this.$message.error('上传失败!');
    },
    handlePreview(file) {
      this.previewImage = URL.createObjectURL(file.raw);
    },
    handleRemove(file, fileList) {
      this.$message.success('已删除文件!');
    },
  },
};
</script>

5. 总结