React中上傳圖片到七牛的示例代碼
之前有寫過類似的一篇文章,有位同學突然找來解惑,發(fā)現(xiàn)自己采用了另外的一個方法,這里也分享下,希望對使用reactjs的同學有幫助。
邏輯思路是這樣子的,在componentDidMount中實現(xiàn)更新dom的操作,異步加載需要的資源文件,然后在加載完后實現(xiàn)qiniu的初始化操作。這里就不需要在webpack或者其他打包工具中去引入qiniu的包文件,導致打完包的文件過大了。
我這里使用了nodejs的庫scriptjs,
const $S = require('scriptjs');
可以實現(xiàn)異步的加載文件,當然你也可以使用你認為更好的,當然也別忘記告訴我下。以下為代碼實現(xiàn)部分:
async componentDidMount() {
let uploadToken = await this.getUploadToken();
$S([
'https://dn-kdjz.qbox.me/js/plupload/2.1.1/plupload.full.min.js',
'https://dn-kdjz.qbox.me/js/qiniu-js-sdk/1.0.17.2/qiniu.min.js'
], 'uploadBundle');
$S.ready('uploadBundle', () => {
// 證件合影
let options1 = {
runtimes: 'html5,flash,html4',
browse_button: 'photoId',
uptoken: uploadToken,
get_new_uptoken: false,
domain: 'https://xxxx.xxxxxx', // bucket域名,下載資源時用到,必需
container: 'photoIdContainer', // 上傳區(qū)域DOM ID,默認是browser_button的父元素
max_file_size: '100mb', // 最大文件體積限制
flash_swf_url: '/js/plupload/2.2.1/Moxie.swf', //引入flash,相對路徑
max_retries: 3, // 上傳失敗最大重試次數(shù)
dragdrop: true, // 開啟可拖曳上傳
drop_element: 'photoIdContainer', // 拖曳上傳區(qū)域元素的ID,拖曳文件或文件夾后可觸發(fā)上傳
chunk_size: '4mb', // 分塊上傳時,每塊的體積
auto_start: true, // 選擇文件后自動上傳,若關閉需要自己綁定事件觸發(fā)上傳
init: {
'FilesAdded': (up, files) => {
plupload.each(files, function(file) {
// 文件添加進隊列后,處理相關的事情
});
},
'BeforeUpload': (up, file) => {
// 每個文件上傳前,處理相關的事情
},
'UploadProgress': (up, file) => {
// 每個文件上傳時,處理相關的事情
},
'FileUploaded': async(up, file, info) => {
// 查看簡單反饋
let domain = up.getOption('domain');
let res = JSON.parse(info);
let sourceLink = await this.getDownloadUrl(res.key);
this.setState({
photoIdKey: res.key,
photoId: sourceLink
})
},
'Error': (up, err, errTip) => {
//上傳出錯時,處理相關的事情
console.log(err);
},
'UploadComplete': () => {
//隊列文件處理完畢后,處理相關的事情
console.log('上傳完成');
},
'Key': (up, file) => {
let timestamp = parseInt((new Date().valueOf() / 1000));
// 若想在前端對每個文件的key進行個性化處理,可以配置該函數(shù)
// 該配置必須要在unique_names: false,save_key: false時才生效
let key = `idcard/${timestamp}_${file.name}`;
return key
}
}
};
// 第一個按鈕
const uploader1 = Qiniu.uploader(options1);
})
}
這里有個getUploadToken方法,這個方法是根據(jù)官方文檔的策略實現(xiàn)了一個獲取上傳token的方法,此方法是通過訪問服務端的接口來獲取token。具體實現(xiàn)過程可以參考官方。如果大家有任何疑問請給我留言,小編會及時回復大家的。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
react component changing uncontrolled in
這篇文章主要為大家介紹了react component changing uncontrolled input報錯解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12
React中實現(xiàn)使用條件渲染來顯示不同的內(nèi)容
在React中,條件渲染是根據(jù)不同的條件選擇性地渲染組件,本文介紹了三種常見的條件渲染方式:使用if語句、使用三元運算符和使用短路運算符,通過這些方法,我們可以根據(jù)應用的狀態(tài)和用戶的操作動態(tài)地顯示不同的內(nèi)容,從而提升用戶體驗和組件的可維護性2025-02-02
React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法,主要發(fā)生在render階段,調(diào)和算法并不是一個特定的算法函數(shù),而是指在調(diào)和過程中,為提高構(gòu)建workInProcess樹的性能,以及Dom樹更新的性能,而采用的一種策略,又稱diffing算法2021-12-12
在react項目中webpack使用mock數(shù)據(jù)的操作方法
這篇文章主要介紹了在react項目中webpack使用mock數(shù)據(jù)的操作方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
關于React Native報Cannot initialize a parameter of type''NSArra
這篇文章主要介紹了關于React Native報Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>錯誤,本文給大家分享解決方案,需要的朋友可以參考下2021-05-05

