el-upload上传图片怎么获取图片宽高

在el-upload上传图片后，可以通过以下步骤获取图片的宽高：
1. 在html部分，使用el-upload组件，并设置相应的属性和事件。
2. 在script部分，定义一个uploadFile函数来处理上传文件的操作。
3. 在uploadFile函数中，创建一个FileReader对象，通过readAsDataURL方法将文件转换成Base64格式。
4. 当读取完成后，通过创建一个Image对象，并将Base64数据赋值给image.src属性。
5. 在Image对象加载完成后，可以获取到图片的宽度和高度，可以根据需求进行相应的判断和操作。

相关问题

el-upload 上传之前获取图片宽高

您可以使用`el-upload`的`before-upload`事件来获取图片的宽高。在`before-upload`事件中，您可以通过`FileReader`来读取图片文件，并使用`Image`对象获取图片的宽高信息。

以下是一个示例代码：

<template>
  <el-upload
    :action="uploadUrl"
    :before-upload="handleBeforeUpload"
  >
    <el-button slot="trigger">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/your-upload-url',
    };
  },
  methods: {
    handleBeforeUpload(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
          const img = new Image();
          img.onload = () => {
            const width = img.width;
            const height = img.height;
            // 在这里可以获取到图片的宽高
            console.log(`宽度：${width}px，高度：${height}px`);
            resolve(file);
          };
          img.onerror = reject;
          img.src = e.target.result;
        };
        reader.readAsDataURL(file);
      });
    },
  },
};
</script>

在上述示例中，`handleBeforeUpload`方法会在上传文件之前被调用。它使用`FileReader`读取图片文件，并创建一个`Image`对象来获取宽高信息。在`img.onload`回调中，您可以拿到图片的宽高，并进行相应的处理。

请注意将代码中的`/your-upload-url`替换为您真实的上传接口地址。

el-upload上传图片限制图片宽高比例

您可以通过设置 `beforeUpload` 方法来限制图片的宽高比例。在 `beforeUpload` 方法中，您可以使用 `FileReader` 对象来读取图片文件，然后获取其宽高比例，如果不符合要求，则返回 `false` 来阻止上传。

以下是一个示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :before-upload="handleBeforeUpload">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleBeforeUpload(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          const img = new Image()
          img.src = reader.result
          img.onload = () => {
            const width = img.width
            const height = img.height
            if (width / height !== 2) { // 限制宽高比例为2
              this.$message.error('图片宽高比例必须为2')
              reject()
            } else {
              resolve()
            }
          }
        }
      })
    }
  }
}
</script>

在上面的代码中，我们限制了图片的宽高比例为2。您可以根据需要修改宽高比例的值。