feat:完成web店铺banner上传

src/modules/store-manage/StoreDecorationPage.less

@@ -83,5 +83,10 @@
       height: 73px;
       background: #E6E6E6;        
     }
+
+    #preview-url-box {
+      width: 500px;
+      height: 73px;
+    }
   }
 }

src/modules/store-manage/StoreWebDecorationTab.jsx

@@ -2,7 +2,7 @@
  * @Author: wufan
  * @Date: 2020-11-30 10:47:38
  * @LastEditors: wufan
- * @LastEditTime: 2020-12-21 15:30:05
+ * @LastEditTime: 2020-12-21 17:32:22
  * @Description: web店铺banner页面
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -24,6 +24,7 @@ import "./StoreDecorationPage.less";
 import User from "@/common/js/user";
 import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal";
 import './StoreDecorationPage.less';
+import Upload from '@/core/upload';
 
 const { confirm } = Modal;
 const DragHandle = sortableHandle(() => (
@@ -34,6 +35,7 @@ const DragHandle = sortableHandle(() => (
 ));
 const SortableItem = sortableElement((props) => <tr {...props} />);
 const SortableContainer = sortableContainer((props) => <tbody {...props} />);
+let cutFlag = false;
 
 class StoreWebDecoration extends React.Component {
   constructor(props) {
@@ -68,7 +70,7 @@ class StoreWebDecoration extends React.Component {
       showSelectFileModal: false,
       diskList: [],
       photoclip: null,
-      preview: ""
+      preview: "",
     };
   }
 
@@ -223,10 +225,13 @@ class StoreWebDecoration extends React.Component {
       () => {
         setTimeout(() => {
           const okBtnDom = document.querySelector("#clipBtn");
+          const viewImgDom = document.querySelector('#preview-url-box');
+
           const options = {
             size: [500, 73],
             rotateFree: false,
             ok: okBtnDom,
+            view: viewImgDom,
             maxZoom: 3,
             style: {
               jpgFillColor: "transparent",
@@ -234,11 +239,22 @@ class StoreWebDecoration extends React.Component {
             done: (dataUrl) => {
               console.log("dataUrl-----", dataUrl);
               const cutImage = this.convertBase64UrlToBlob(dataUrl);
-              // this.getSignature(cutImage, fileName);
+              console.log("cutImage-----",cutImage);
+              this.getSignature(cutImage, fileName);
               setTimeout(() => {
                 cutFlag = false;
               }, 2000);
             },
+            fail: (failInfo) => {
+              console.log("failInfo-----", failInfo);
+
+            },
+            loadComplete:(img)=>{
+              console.log("img---",img,img.src);
+              this.setState({
+                previewUrl: img.src
+              })
+            }
           };
           if (!this.state.photoclip) {
             const photoclip = new PhotoClip("#headPicModal", options);
@@ -259,33 +275,23 @@ class StoreWebDecoration extends React.Component {
   };
 
   //获取resourceId
-  getSignature = (cutImage, fileName) => {
-    const { swiperImages, choosedFlag } = this.state;
-    // const params = {
-    //   fileName,
-    //   instId: window.currentUserInstInfo.instId,
-    // };
+  getSignature = (blob, fileName) => {
 
-    // UploadOss.uploadBlobToMFSOSS("sales/public/businessMicroWebsite/getUploadSignature", params, cutImage, fileName ).then((res) => {
-    //   const imgAddress = {
-    //     resourceId: res.resourceId,
-    //     imageUrl: res.url,
-    //     instId: window.currentUserInstInfo.instId,
-    //   };
-    //   swiperImages.push(imgAddress);
-    //   this.setState({
-    //     visible: false,
-    //     swiperImages
-    //   }, () => {
-    //     this.changeImageList(swiperImages, choosedFlag);
-    //   });
-    // });
+    Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((addBannerPath) => {
+      this.setState({
+        visible: false,
+        addBannerPath
+      },()=>{
+        this.addStoreBanner();
+        this.getStoreDecorationList();
+      })
+    });
   };
 
   addStoreBanner = () => {
-    const { previewUrl } = this.state;
+    const { previewUrl, addBannerPath} = this.state;
     const params = {
-      bannerPath: previewUrl,
+      bannerPath: addBannerPath,
       storeId: User.getStoreId(),
       termType: "WEB_ADMIN",
     };
@@ -380,6 +386,7 @@ class StoreWebDecoration extends React.Component {
               key="back"
               onClick={() => {
                 this.setState({ visible: false });
+                this.handleToAddStoreDecoration();
               }}
             >
               重新上传
@@ -410,7 +417,8 @@ class StoreWebDecoration extends React.Component {
             <div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
             <div className="preview-img">
               <div className="title">效果预览</div>
-              <img src={previewUrl} alt="图片预览" className="preview-url"/>
+              <img src={previewUrl} alt="图片预览" className="preview-url" />
+              <div id="preview-url-box"></div>
             </div>
           </div>
         </Modal>