feat:修改创建课程的上传封面图

src/modules/course-manage/components/AddLiveBasic.jsx

@@ -13,12 +13,14 @@ import { ImgCutModalNew } from '@/components';
 import StoreService from "@/domains/store-domain/storeService";
 import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
 import Upload from '@/core/upload';
+import PhotoClip from 'photoclip'
 
 import './AddLiveBasic.less';
 
 const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
 const fieldNames  = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
 let cutFlag = false;
+let timer = null
 class AddLiveBasic extends React.Component {
 
   constructor(props) {
@@ -27,11 +29,13 @@ class AddLiveBasic extends React.Component {
       imageFile: null,
       showCutModal: false,
       courseCatalogList:[],
-      showSelectFileModal: false
+      showSelectFileModal: false,
+      cutImageBlob: null
     }
   }
   componentWillUnmount() {
   }
+ 
   componentDidMount(){
     this.getCourseCatalogList();
   }
@@ -83,26 +87,14 @@ class AddLiveBasic extends React.Component {
   }
   handleSelectCover = (file) => {
     this.uploadImage(file);
-
-    // this.setState({
-    //   showSelectFileModal: false
-    // })
-    // const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
-    // const coverObj = {
-    //   contentType: 'COVER',
-    //   mediaType: 'PICTURE',
-    //   mediaContent: resourceId,
-    //   mediaUrl: ossUrl,
-    //   mediaName: folderName,
-    //   size: folderSize
-    // }
-    // this.props.onChange('coverObj', coverObj);
   }
+ 
    //上传图片
    uploadImage = (imageFile) => {
     const { folderName } = imageFile;
     const fileName =
     window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
+    const self = this;
     this.setState(
       {
         visible: true,
@@ -110,59 +102,77 @@ class AddLiveBasic extends React.Component {
       () => {
         setTimeout(() => {
           const okBtnDom = document.querySelector("#headPicModal");
-          const viewImgDom = document.querySelector('#preview-url-box');
-
           const options = {
             size: [500, 282],
-            rotateFree: false,
             ok: okBtnDom,
-            view: viewImgDom,
             maxZoom: 3,
             style: {
               jpgFillColor: "transparent",
             },
-            done: (dataUrl) => {
-              const cutImage = this.convertBase64UrlToBlob(dataUrl);
-              this.getSignature(cutImage, fileName);
+            done: function (dataUrl) {
+              clearTimeout(self.timer);
+              self.timer = setTimeout(() => {
+                if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
+                  console.log(this.scale(), 'scale')
+                  const _dataUrl = this.clip()
+                  const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
+                  self.setState({
+                    cutImageBlob,
+                    dataUrl: _dataUrl,
+                    rotate: this.rotate(),
+                    scale: this.scale()
+                  })
+                }
+
+              }, 500)
+
+              const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
+              self.setState({
+                cutImageBlob,
+                dataUrl
+              })
               setTimeout(() => {
                 cutFlag = false;
               }, 2000);
             },
             fail: (failInfo) => {
+              message.error("图片上传失败了，请重新上传");
             },
-            loadComplete:(img)=>{
-              this.refs.headPicModal.click();
-              setTimeout(()=>{
-                this.refs.headPicModal.click();
-              },100)
-              this.setState({
-                previewUrl: img.src
+            loadComplete: function (img) {
+              setTimeout(() => {
+                const _dataUrl = this.clip()
+                self.setState({
+                  dataUrl: _dataUrl,
                 })
-            }
+              }, 100)
+
+            },
           };
           if (!this.state.photoclip) {
-            const photoclip = new PhotoClip("#headPicModal", options);
-            photoclip.load(imageFile.ossUrl);
-            console.log("photoclip-222",photoclip);
+            const _photoclip = new PhotoClip("#headPicModal", options);
+            _photoclip.load(imageFile.ossUrl);
             this.setState({
-              photoclip,
+              photoclip: _photoclip,
             });
           } else {
             this.state.photoclip.clear();
             this.state.photoclip.load(imageFile.ossUrl);
           }
-        },200);
+
+        }, 200);
       }
     );
   };
+
    //获取resourceId
   getSignature = (blob, fileName) => {
     const { choosedBannerId } = this.state;
     Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
       this.setState({
         coverClicpPath:signInfo.fileUrl,
-        coverId:signInfo.resourceId
-      })
+        coverId:signInfo.resourceId,
+        visible: false
+      },()=>this.updateCover())
    
     });
   };
@@ -181,12 +191,6 @@ class AddLiveBasic extends React.Component {
     this.setState({
       showSelectFileModal: false
     })
-    // const coverObj = {
-    //   contentType: 'COVER',
-    //   mediaType: 'PICTURE',
-    //   mediaContent: coverClicpPath,
-    // }
-    // console.log("coverObj",coverObj);
     this.props.onChange('coverUrl', coverClicpPath);
     setTimeout(()=>{
       this.props.onChange('coverId', coverId);
@@ -194,7 +198,7 @@ class AddLiveBasic extends React.Component {
   
   }
   render() {
-    const { showCutModal, imageFile,courseCatalogList,showSelectFileModal,visible } = this.state;
+    const { showCutModal, imageFile,courseCatalogList,showSelectFileModal,visible,cutImageBlob} = this.state;
     const { data,pageType,isEdit} = this.props;
     const { courseName,categoryName,coverUrl} = data;
     const fileName = '';
@@ -313,8 +317,7 @@ class AddLiveBasic extends React.Component {
                   cutFlag = true;
                   this.refs.hiddenBtn.click();
                 }
-                this.setState({ visible: false });
-                this.updateCover()
+                this.getSignature(cutImageBlob);
               }}
             >
               确定
@@ -335,7 +338,9 @@ class AddLiveBasic extends React.Component {
             <div className="preview-img">
               <div className="title">效果预览</div>
               {/* <img src={previewUrl} alt="图片预览" className="preview-url" /> */}
-              <div id="preview-url-box" style={{width:500,height:282}}></div>
+              <div id="preview-url-box" style={{width:500,height:282}}>
+                <img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
+              </div>
             </div>
           </div>
         </Modal>