el-upload截图宽高

### 解决 `el-upload` 上传截图时的宽高设置

为了处理 `el-upload` 组件在上传截图时遇到的宽度和高度问题，可以采用以下方法：

#### 使用自定义裁剪工具
一种常见的方式是在前端引入图像裁剪库（如Cropper.js），让用户可以在上传前调整图片尺寸。这样不仅可以控制最终上传到服务器上的图片大小，还可以提高用户体验。

<template>
  <div>
    <!-- 裁剪组件 -->
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      :ready="onCropReady"
      style="width:100%;height:400px;"
    ></vue-cropper>

    <!-- 文件选择器 -->
    <el-button @click="handleChooseImage">选择图片</el-button>
    
    <!-- 提交按钮 -->
    <el-button type="primary" @click="uploadCroppedImage">确认并上传</el-button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
export default {
  components: { VueCropper },
  
  data() {
    return {
      imgSrc: ''
    };
  },

  methods: {
    handleChooseImage() {
      this.$refs.cropper.replace(this.imgSrc);
    },

    onCropReady() {
      console.log('裁剪准备完成');
    },

    uploadCroppedImage() {
      const croppedCanvas = this.$refs.cropper.getCroppedCanvas();
      const formData = new FormData();

      // 将canvas转换成blob对象再加入formdata中
      croppedCanvas.toBlob(blob => {
        formData.append('file', blob, 'filename.png');

        // 发送请求至后端接口...
      });
    }
  }
};
</script>

这种方法允许用户先预览所选图片，在满意后再进行实际提交操作[^2]。

#### 设置响应式样式
另一种较为简单的方案是对已上传成功的缩略图应用CSS样式来限定其显示区域内的最大宽度或高度。此方式不会改变原始文件分辨率，仅影响页面布局效果。

/* CSS */
.el-upload-list__item-thumbnail {
  max-width: 200px;
  height: auto !important; /* 自适应保持比例 */
}

上述代码片段会使得所有由 `el-upload` 渲染出来的缩略图都遵循指定的最大宽度约束，并自动计算合适的高度以维持原有纵横比[^3]。