详解el-upload图片回显

在开发过程中，图片上传和展示是非常常见的需求。而Vue的Element UI库中的组件el-upload提供了图片上传以及图片回显的功能，使用起来也非常方便。本文将从多个方面详细介绍el-upload图片回显的相关知识。

一、图片回显基础

图片回显是指在页面上展示已经上传的图片，这是图片上传功能的必备环节。在el-upload中，图片回显分为两种情况：一是通过URL展示已上传的图片，二是通过Base64展示已上传的图片。

要实现图片回显，需要在el-upload标签内添加一个el-image组件，在组件的src属性中绑定需要回显的图片地址或Base64编码。代码示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="false"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">选取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>

需要注意的是，如果使用URL进行图片回显，则需要服务器返回URL地址；如果使用Base64进行图片回显，则需要在服务器返回成功的信息中包含图片的Base64编码。

二、图片单选和多选

el-upload提供了单选和多选的功能，可以根据需求进行选择。默认情况下，el-upload是多选的，可以通过设置属性before-upload的返回值来控制是否可以多选或单选。

多选代码示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="false"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">选取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>

单选代码示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="false"
    :on-success="handleUploadSuccess"
    :before-upload="handleBeforeUpload">
  <el-button slot="trigger">选取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>


export default {
  methods: {
    handleBeforeUpload() {
      return false;
    }
  }
}
</script>

三、图片裁剪和压缩

在上传图片的过程中，有时候需要将图片进行裁剪或压缩，以减小图片的大小和体积，提高网页加载速度。el-upload为图片裁剪和压缩提供了相应的方法。

裁剪代码示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="false"
    :before-upload="handleBeforeUpload"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">选取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>


export default {
  methods: {
    handleBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }

      /* 打开图片裁剪对话框 */
    }
  }
}
</script>

压缩代码示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="false"
    :before-upload="handleBeforeUpload"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">选取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>


export default {
  methods: {
    handleBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }

      /* 使用canvas将图片进行压缩 */
    }
  }
}
</script>

四、图片上传进度显示

在上传大文件的过程中，为了让用户知道上传的进度，el-upload提供了上传进度的显示功能。可以通过配置属性show-progress来实现。

代码示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-progress="true"
    :show-file-list="false"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">选取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>

五、图片预览和删除

el-upload还提供了预览和删除已上传图片的功能。只需要在属性show-file-list设置为true，就可以在上传组件下方显示已上传的图片列表，同时提供了预览和删除按钮。

代码示例：

<el-upload
    class="upload-demo"
    action="your-upload-url"
    :show-file-list="true"
    :on-success="handleUploadSuccess">
  <el-button slot="trigger">选取文件</el-button>
  <el-image v-if="imageUrl"
    style="width: 100%"
    :src="imageUrl"
    :preview-src-list="[imageUrl]">
  </el-image>
</el-upload>

六、总结

本文从el-upload的图片回显基础、图片单选和多选、图片裁剪和压缩、图片上传进度显示和图片预览和删除五个方面详细介绍了el-upload图片回显的相关知识。希望本文能够对读者有所帮助，使读者在开发中更好地应用el-upload组件。