第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React-cropper結(jié)合Antd Upload組件編輯圖片以及上傳相關(guān)問題

React-cropper結(jié)合Antd Upload組件編輯圖片以及上傳相關(guān)問題

Time_True_Lee 2019-05-16 15:15:57
使用到的組件:Antd{ Modal(彈窗)Upload(上傳)}??????????????????????????cropperjs1.Upload組件中有上傳后提供預(yù)覽的例子流程:點(diǎn)擊上傳---選擇文件-----編輯-----保存-----上傳服務(wù)器----??????????------等待父組件表單填寫完之后再上傳一遍(不同api)思路:父組件是一個表單,其中一項是上傳頭像(子組件),點(diǎn)擊上傳圖片類型以及各種條件符合 進(jìn)行編輯 點(diǎn)擊保存子傳父到大表單上,因為大表單上有一個上傳按鈕。問題1. 如何上傳圖片到服務(wù)器saveImg?=?()?=>?{ ??let?{srcCropper}=this.state; ????//?拿到文件名 ????let?filename?=?this.state.selectImgName; ????//?這里可以嘗試修改上傳圖片的尺寸 ????this.refs.cropper.getCroppedCanvas().toBlob(async?blob?=>?{ ??????//?創(chuàng)造提交表單數(shù)據(jù)對象 ??????const?formData?=?new?FormData(); ??????//?添加要上傳的文件 ??????formData.append('file',?blob,?filename); ??????//?提示開始上傳 ??????try?{ ????????//?接口 ????????let?res?=?await?upload(srcCropper,?formData); ????????if(res.errCode?===?0)?{ ??????????//?上傳成功 ??????????//子傳父 ??????????this.props.getImg();?//未寫 ??????????message.success('上傳成功') ????????}?else?{ ??????????//?上傳失敗 ??????????message.error('上傳失敗') ????????} ??????}?catch(err)?{ ????????console.log(err); ??????} ??????this.handleOnCancel() ????},"image/jpeg") };//?Upload上傳之前函數(shù)// ?上傳文件之前的鉤子,參數(shù)為上傳的文件,若返回 false 則停止上傳。支持返回一個 Promise 對象,// ?Promise 對象 reject 時則停止上傳,resolve 時開始上傳// (resolve 傳入 File 或 Blob 對象則上傳 resolve 傳入對象)。注意:IE9 不支持該方法。beforeUpload(file)?{ ??const?isLt10M?=?file.size?/?1024?/?1024?<?6; ??if?(!isLt10M)?{?//添加文件限制 ????//?message.error('文件大小不能超過6M'); ????return?false; ??} ??let?reader=new?FileReader(); ??reader.readAsDataURL(file);?//開始讀取文件 ??//?因為讀取文件需要時間,所以要在回調(diào)函數(shù)中使用讀取的結(jié)果 ??reader.onload?=?(e)?=>?{ ????console.log(file); ????this.setState({ ??????srcCropper:?e.target.result,//cropper的圖片路徑 ??????selectImgName:?file.name,?//文件名稱 ??????selectImgSize:?(file.size?/?1024?/?1024),?//文件大小 ??????selectImgSuffix:?file.type.split("/")[1],?//文件類型 ??????editImageModalVisible:?true,?//打開控制裁剪彈窗的變量,為true即彈窗 ????}); ??}; ??return?false; }思維邏輯混亂,請哪位老師指導(dǎo)一下? 理清一下思路。
查看完整描述

2 回答

  • 2 回答
  • 0 關(guān)注
  • 3204 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號