[网络协议]el-upload自定义上传http-request，校验文件、图片大小、宽高，有效阻止上传事件

问题描述：

element-ui上传组件el-upload如果使用自定义上传http-request，发现before-upload钩子内可以检验图片宽高、大小，但是阻止不了上传事件。

解决方案：

before-upload钩子内使用new Promise同步可有效阻止上传事件，reject()可以阻止。

代码实现：

html部分：

<el-upload
        ref="uploadFile"
        action="#"
        :disabled="disabled"
        list-type="picture-card"
        :accept="accept"
        :limit="limitNum"
        :show-file-list="limitNum>1?true:false"
        :file-list="limitNum>1?fileList:[]"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-exceed="handleExceed"
        :before-upload="customRequest"
        :http-request="handleRequest"
      >
</el-upload>

js部分：

 handleRequest(params: any) {
    // 自定义上传的代码和其他逻辑
    },
 customRequest(file: any) {
        if (props.limitNum === 1) {
          uploadFile.value.clearFiles();
        }
        // 获取图片的宽高
        return new Promise<void>((resolve, reject) => {
          let isLimitSize = true;
          const { size, width, height} = props;

          // 判断图片大小
          if (size) {
            isLimitSize = file.size / 1024 < size;
          }
          if (!isLimitSize) {
            ElMessage.error(`上传图片大小不能超过${size}KB!`);
            reject();
          }
          const fileReader = new FileReader();
          fileReader.onload = () => {
            const result = JSON.parse(`${fileReader.result}`);
            // 判断图片宽高
            if (width && height) {
              const valid = result.w === width && result.h === height;
              if (!valid) {
                ElMessage.error(`上传文件尺寸不符合,只能是${width}*${height}`);
                reject();
              }
            }
            resolve();
          };
          fileReader.readAsText(file);
     });
   },