element-ui图片上传组件查看和限制方式

下面是element-ui图片上传组件查看和限制方式的完整攻略。

概述

在vue项目中，我们通常使用element-ui组件库来快速构建界面。element-ui封装了很多常用的组件，包括图片上传组件。图片上传组件可以帮助我们方便地上传和查看图片，并且还可以限制上传图片的大小和格式，保证上传图片的质量和量。

下面分别介绍图片上传组件的查看和限制方式。

查看方式

在element-ui中，图片上传有两种方式：上传和裁剪。上传方式可以上传任意大小和格式的图片，而裁剪方式只能上传一张固定大小和格式的图片。

上传方式

使用上传方式，上传任意大小和格式的图片非常方便。上传组件在上传图片后会显示上传完成的图片，我们可以通过以下代码查看上传完成的图片：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="handleSuccess">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success">上传文件</el-button>
  </el-upload>
  <img v-if="imageUrl !== ''" :src="imageUrl" alt="上传的图片">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
    }
  }
}
</script>

在上面的代码中，el-upload组件用于上传图片，img标签用于显示上传完成的图片。当上传成功后，handleSuccess方法会将上传的图片转换为url链接，并将链接赋值给imageUrl，供img标签显示。

裁剪方式

使用裁剪方式，上传固定大小和格式的图片。裁剪组件在上传图片后会打开一个裁剪框架，我们需要选择要裁剪的部分。裁剪完成后，裁剪组件会将裁剪后的图片上传到服务器，服务器返回上传结果。

以下是使用裁剪组件的示例代码：

<template>
  <el-upload
    class="avatar-uploader"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl !== ''" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      imageBeforeCrop: ''
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJpg = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJpg) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      // 保存原始图片文件
      this.imageBeforeCrop = file;

      // 当裁剪完成后返回`true`，否则返回`false`取消上传
      return isJpg && isLt2M;
    }
  }
}
</script>

<style scoped>
.avatar-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px dashed #ccc;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #999;
}
</style>

在上面的代码中，el-upload组件用于上传图片，img标签用于显示裁剪后的图片。当上传成功后，handleSuccess方法会将上传的图片转换为url链接，并将链接赋值给imageUrl，供img标签显示。在上传前，beforeAvatarUpload方法会检查上传图片的大小和格式是否符合要求。同时，我们保存原始图片文件，以便上传裁剪后的图片。

限制方式

在element-ui中，我们可以通过设置el-upload组件的属性来限制上传的图片大小和格式。

以下是设置上传图片大小限制的代码：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :max-size="2">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success">上传文件</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      this.$message.success(`上传成功: ${file.name}`);
    },
    beforeUpload(file) {
      const isJpg = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJpg) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJpg && isLt2M;
    }
  }
}
</script>

在上面的代码中，我们使用max-size属性来限制上传图片的大小。在上传前，beforeUpload方法会检查上传图片的大小和格式是否符合要求。

以下是设置上传图片格式限制的代码：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :accept="'image/jpeg'">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success">上传文件</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      this.$message.success(`上传成功: ${file.name}`);
    },
    beforeUpload(file) {
      const isJpg = file.type === 'image/jpeg';

      if (!isJpg) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }

      return isJpg;
    }
  }
}
</script>

在上面的代码中，我们使用accept属性来限制上传图片的格式为jpeg。在上传前，beforeUpload方法会检查上传图片的格式是否符合要求。

结论

通过以上代码示例，我们可以完整地了解element-ui图片上传组件的查看和限制方式，包括上传图片的显示和限制，裁剪图片的上传和限制。在使用图片上传组件时，需要注意图片的大小和格式限制，以便保证上传图片的质量和量。