使用到的組件: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)一下? 理清一下思路。
React-cropper結(jié)合Antd Upload組件編輯圖片以及上傳相關(guān)問題
Time_True_Lee
2019-05-16 15:15:57