亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

react+antd+upload結(jié)合使用示例

 更新時間:2023年05月31日 08:35:17   作者:灰太狼的情與殤  
這篇文章主要為大家介紹了react+antd+upload結(jié)合使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

正文

電腦系統(tǒng) windows11專業(yè)版

開發(fā)環(huán)境 react16+antd4

在項目開發(fā)的時候,我們會需要在上傳的時候做一些限制,下面我來分享一下。

template

<Upload
  listType="picture-card"
  className="avatar-uploader"
  fileList={hotImgFileList}
  showUploadList={{
    showPreviewIcon: true,
    showDownloadIcon: false,
    showRemoveIcon: true,
  }}
  customRequest={(options) => {
    UploadCustomRequest(options, {
      type: 'bgImg',
      FileSize: 1,
      fileType: ['png', 'jpg', 'jpeg'],
      fileTypeValue: '.png、.jpg、.jpeg',
    });
  }}
  beforeUpload={(file) => {
    beforeUpload(file, {
      type: 'bgImg',
      FileWidth: 750,
      FileHeight: 0,
      fileWidthValue: '750*0',
    });
  }}
  >

mathods

const beforeUpload = (file, data) => {
    const width = data.FileWidth;
    const height = file.FileHeight;
    return new Promise((resolve, reject) => {
      let reader = new FileReader();
      reader.addEventListener(
        'load',
        () => {
          let img = new Image();
          img.src = reader.result;
          img.onload = () => {
            if (img.width < width || img.height < height) {
              data.FileHeight == 0
                ? message.error(`請上傳寬大于等于 ${data.FileWidth} 的封面圖!`)
                : message.error(`請上傳寬高大于等于 ${data.fileWidthValue} 的封面圖!`);
              reject(`請上傳寬高大于等于 ${data.fileWidthValue} 的封面圖!`);
            } else {
              resolve();
            }
          };
        },
        false,
      );
      reader.readAsDataURL(file);
    });
  };
const UploadCustomRequest = (options, data) => {
    // console.log(options);
    console.log(options.file);
    console.log(data);
    const fileType = options.file.name.split('.');
    const fileDate = fileType.slice(-1);
    const isFileSize = options.file.size / 1024 / 1024 < data.FileSize;
    let IsFileType = false;
    if (data.fileType.indexOf(fileDate[0]) < 0) {
      IsFileType = false;
      message.error(`僅支持圖片格式:${data.fileTypeValue}格式圖片!`);
      return Upload.LIST_IGNORE;
    } else {
      IsFileType = true;
    }
    !isFileSize && message.error(`上傳圖片大小不能超過${data.FileSize}M!`) && Upload.LIST_IGNORE;
  };

本期的分享到這里就結(jié)束啦,希望對你有所幫助,讓我們一起努力走向巔峰。

以上就是react+antd+upload 使用的詳細內(nèi)容,更多關(guān)于react+antd+upload 使用的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • React?之?Suspense提出的背景及使用詳解

    React?之?Suspense提出的背景及使用詳解

    這篇文章主要為大家介紹了React?之?Suspense提出的背景及使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案

    React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案

    這篇文章主要為大家介紹了React?中使用?RxJS?優(yōu)化數(shù)據(jù)流的處理方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • 淺談react useEffect閉包的坑

    淺談react useEffect閉包的坑

    筆者最近用react useEffect閉包,其中踩到了一些坑在此與大家分享一下。需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-06-06
  • React?Context詳解使用方法

    React?Context詳解使用方法

    Context提供了一個無需為每層組件手動添加props,就能在組件樹間進行數(shù)據(jù)傳遞的方法。在一個典型的?React?應(yīng)用中,數(shù)據(jù)是通過props屬性自上而下(由父及子)進行傳遞的,但這種做法對于某些類型的屬性而言是極其繁瑣的
    2022-12-12
  • React hooks的優(yōu)缺點詳解

    React hooks的優(yōu)缺點詳解

    這篇文章主要介紹了React hooks的優(yōu)缺點詳解,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-04-04
  • React-Native中禁用Navigator手勢返回的示例代碼

    React-Native中禁用Navigator手勢返回的示例代碼

    本篇文章主要介紹了React-Native中禁用Navigator手勢返回的示例代碼,具有一定的參考價值,有興趣的可以了解一下
    2017-09-09
  • React?Native?Modal?的封裝與使用實例詳解

    React?Native?Modal?的封裝與使用實例詳解

    這篇文章主要介紹了React?Native?Modal?的封裝與使用,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-09-09
  • React使用Ant Design方式(簡單使用)

    React使用Ant Design方式(簡單使用)

    文章介紹了AntDesign組件庫,它是基于AntDesign設(shè)計體系的ReactUI組件庫,主要用于研發(fā)企業(yè)級中后臺產(chǎn)品,文章詳細講解了如何下載和按需引入antd組件庫,并通過一個小案例展示了如何使用antd進行布局和改造,最后,文章提醒大家在使用過程中可以參考官網(wǎng)的屬性介紹
    2024-11-11
  • React?Hook中的useEffecfa函數(shù)的使用小結(jié)

    React?Hook中的useEffecfa函數(shù)的使用小結(jié)

    React 會在組件更新和卸載的時候執(zhí)行清除操作, 將上一次的監(jiān)聽取消掉, 只留下當(dāng)前的監(jiān)聽,這篇文章主要介紹了React?Hook?useEffecfa函數(shù)的使用細節(jié)詳解,需要的朋友可以參考下
    2022-11-11
  • React插槽使用方法

    React插槽使用方法

    本文主要介紹了React插槽使用方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-12-12

最新評論