图片上传校验像素大小是否符合

上传逻辑

  /**
   * 上传视频封面
   * @param file 图片文件
   */
  const _beforeUploadPic = async (picFile: RcFile, file: any, item: any) => {
    new Promise((resolve, reject) => {
      const reader: any = new FileReader();
      reader.readAsDataURL(picFile);
      reader.onload = () => {
        const image = new Image();
        image.src = reader.result;
        image.onload = () => {
          const w = image.width;
          const h = image.height;
          if (w < 332 || h < 186) {
            UNVMessageBox.error(
              intl.formatMessage({
                id: 'The picture size should be at least 332*186'
              })
            );
            return reject();
          } else {
            return resolve(true);
          }
        };
      };
    }).then(async () => {
      const res = await uploadPic(picFile);
      const { code, data, msg } = res || {};
      if (code === 0) {
        // 把之前的图片URL删除
        const { picUrl } = file;
        if (picUrl) {
          dispatch({
            type: 'productFileUpload/delFile',
            payload: [picUrl]
          });
        }
        // 先赋值给当前文件
        const newFile = {
          ...file,
          picUrl: data
        };
        const { appendFiles } = item;
        let tempList: any = [];
        tempList =
          Array.isArray(appendFiles) &&
          appendFiles.length > 0 &&
          appendFiles.filter((aItem: any) => aItem.uid !== file.uid);
        tempList.push(newFile);
        const newItem = {
          ...item,
          appendFiles: tempList
        };
        setCurrentUploadInfo(
          currentUploadInfo.map((cItem: any) => {
            if (cItem.id === item.id) {
              return newItem;
            } else {
              return cItem;
            }
          })
        );
        // 改变了文档标题列表后，改变formitem的值
        const key = `appendFiles-${item.id}`;
        formInstance.setFieldsValue({ [key]: newItem.appendFiles });
      } else {
        UNVMessageBox.error(msg);
      }
    });
  };

组件

<Upload
                                className={
                                  styles.productFileUpload_addFile_uploadVideoCovers
                                }
                                fileList={[]} //已经上传的文件列表（受控），不设置的话默认就显示已上传文件
                                beforeUpload={(picFile: RcFile) =>
                                  _beforeUploadPic(picFile, file, item)
                                } //上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传
                              >
                                <UNVLoading loading={uploadPicLoading}>
                                  {file.picUrl ? (
                                    <div
                                      className={
                                        styles.productFileUpload_addFile_uploadVideoCoverReals
                                      }
                                    >
                                      <GetImg
                                        alt="pic"
                                        src={file.picUrl}
                                        className={
                                          styles.productFileUpload_addFile_uploadVideoCoverReal
                                        }
                                        title={intl.formatMessage({
                                          id: 'If the data type is "Video Tutorial", you can upload a video cover image. Other data types do not need to be uploaded'
                                        })}
                                      />
                                      <UNVIcon
                                        icon="deleteIcon"
                                        onClick={(e) =>
                                          _delPic(e, file.picUrl, file, item)
                                        }
                                        className={
                                          styles.productFileUpload_addFile_delIcon
                                        }
                                      />
                                    </div>
                                  ) : (
                                    <div
                                      title={intl.formatMessage({
                                        id: 'If the data type is "Video Tutorial", you can upload a video cover image. Other data types do not need to be uploaded'
                                      })}
                                      className={
                                        styles.productFileUpload_addFile_uploadVideoCover
                                      }
                                    >
                                      <UNVIcon
                                        icon="addIcon"
                                        className={
                                          styles.productFileUpload_addFile_addIcon
                                        }
                                      />
                                      <div>
                                        {intl.formatMessage({
                                          id: 'Upload Video Cover'
                                        })}
                                      </div>
                                    </div>
                                  )}
                                </UNVLoading>
                              </Upload>

// 上传文件转url

export const uploadPic = (data: any) => {

  const formData = new FormData();

  formData.append('file', data);

  return request(

    {

      method: 'POST',

      url: `${requestBase}/product-svc/file/upload`,

      data: formData

    },

    'application/x-www-form-urlencoded'

  );

};