封裝React AntD的upload上傳元件

上傳檔案也是我們在實際開發中常遇到的功能，比如上傳產品以供更好地宣傳我們的產品，上傳excel文件以便於更好地展示更多的產品資訊，上傳zip檔案以便於更好地收集一些資料資訊等等。至於為何要把上傳元件封裝成乙個公共的、可復用的元件，在前兩篇文章封裝react antd的form表單元件、封裝react antd的**table元件中已經作了很多介紹，這裡同樣不再贅述。

有朋友覺得這些功能元件在各種前端框架滿天飛的今天都大同小異、大差不差，甚至覺得level有點low。哈哈，其實事實也確實是這樣的，我們去二次封裝這些原本已基本成熟的框架元件，逼格也確實不高，且隨心所欲的空間也不大，但我覺得這並不妨礙我們的日常開發。我們作為前端er，大部分工作都是在產品er的需求陰影下，頂著髮際線越來越高的矇圈腦袋，認認真真的砌牆，在膽戰心驚、如履薄冰地試探「今晚會否加班」的心態中活過每乙個白天，已經是阿彌陀佛了。如果再碰上乙個好的領導，在每乙個階段的開發任務結束後能再請我們去嗨皮一番，那就真是「今天好天氣，老狼請吃雞了。」所以，我們能做的，只有簡化開發步驟，提高元件的復用率，再完美一點就是提供可定製化的封裝元件了。但這是個仁者見仁智者見智的看法，我還是很尊重認可有獨立思考能力的人！

話不多說，先來介紹一下封裝過程中所關注的幾個點：

上傳檔案勢必需要我們去關注所上傳檔案的大小。這個功能點，我們放在antd所提供的upload元件的beforeupload方法中，當然beforeupload方法我們也是封裝在upload元件中，通過使用時傳入的配置來控制檔案大小。

上傳檔案的格式或型別也是我們必須要去關注的乙個點，比如這個上傳控制項只能上傳，那個上傳控制項只能上傳excel文件等等，我們可以使用antd所提供的upload元件的accept來控制，當然accept也是被封裝在了upload元件中。

antd所提供的upload元件中給我們提供了乙個action的api，官方的解釋是action：上傳的位址，跟form的表單提交有點類似。這種的上傳方式我們不太好控制，我們會使用upload元件的customrequest方法來自定義上傳的實現，官方對其的解釋是：通過覆蓋預設的上傳行為，可以自定義自己的上傳實現。

關於上傳功能，我們需要注意的也基本就是以上三點，至於我們是上傳到自己的伺服器還是第三方如阿里雲，則不在這篇文章的介紹範圍了。下面來看一下具體實現。

外甥打燈籠——照舅（照舊）先放一張效果圖：

效果圖有點小，因為是縮圖，就不要介意這個細節了。

1、所封裝的上傳元件upload.js

import  from 'react'
import  from 'antd';
const h = createelement;
const suffix = /.+(\.\w+)$/,
byte = 1024,
accept = ,
getaccepts = accept => (array.isarray(accept) ? accept : [accept]).map(ac => accept[ac]).join(','),
beforecheck = (config, file) =>  = config || {},  = file, accepts = getaccepts(accept).split(',');
//大小限制(m)
if(math.pow(byte, 2) * max < size)m`);
return false;}}
const uploadcomponent = props =>  = props,  = config, attrs = {};
//不能在props物件上直接新增屬性，只能再定義乙個attrs物件
object.assign(attrs,  = opts,  = file, regexp = /image\/[a-z]$/i;
name = `$$`;
//判斷上傳的檔案是否是，若不是，前端可自行根據isimg來控制是否可預覽檔案
file.isimg = regexp.test(type) ? true : false;
// fetch('', ).then(r =>  } = r;
//   requesturls = requesturls.length < 1 ? '' : requesturls[0]
//   if (requesturls.indexof('?') > -1) requesturls = requesturls.split('?')[0]
//   onsuccess();
// })
let resfile = 
onsuccess(resfile)
},})
return h(upload, , children)
}export default uploadcomponent

**中注釋的部分模擬的就是上傳到伺服器，不過這個位址是從antd上抄來的，貌似不能用。

2、upload元件的使用方法：

import react,  from 'react'
import upload from './upload'
const uploadcomp = () => ;
const [filelist, setfilelist] = usestate()
const onpreview = file => 
const onsuccess = res => 
return 
}export default uploadcomp

最後還是再貼一下本次封裝所用到的各個包的版本：

react: 16.8.6,

react-dom: 16.8.6,

react-router-dom: 5.0.0,

antd: 4.3.5,

@babel/core: 7.4.4,

babel-loader: 8.0.5

封裝React AntD的upload上傳元件

封裝React AntD的dialog彈窗元件

基於 React Antd 的管理系統

VUE Toast封裝外掛程式方式的封裝

封裝React AntD的upload上傳元件

封裝React AntD的dialog彈窗元件

基於 React Antd 的管理系統

VUE Toast封裝 外掛程式方式的封裝

相關推薦

VUE Toast封裝外掛程式方式的封裝