泸职版本增加自定义表单 增加视频上传组件. 后台接口暂时用的雅职生产

FormInsertDiy/config/index.js

@@ -124,6 +124,7 @@ const transLate = {
   RangePicker: 'rangePicker',
   UploadCom: 'buttonUpload',
   ImgUploadCom: 'upload',
+  VideoUploadCom: 'upload',
   Input: 'input',
   TableSelect: 'tableSelect', // 表格选择
   ChildForm: 'childForm', // 最终保存的数据还有问题

one_stop_public/Signature/index.jsx

@@ -5,14 +5,10 @@
  */
 import React, { Component } from 'react'
 import SignatureCanvas from 'react-signature-canvas'
-// import Button from '@/components/NewButton';
 import { message,Button } from 'antd';
 import config from '@/webPublic/one_stop_public/config';
-import { queryApiActionPath } from "../utils/queryConfig";
-import baseX from 'base-x';
-const Bs64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
-const base64 = baseX(Bs64);
 import reqwest from 'reqwest';
+
 function dataURLtoBlob(toDataURL) {
     var arr = toDataURL.split(","),
       mime = arr[0].match(/:(.*?);/)[1],
@@ -37,8 +33,8 @@ export default class index extends Component {
         this.state = {
             url:value,
         }
-       
-     
+
+
     }
     triggerChange = (changedValue) => {
         // Should provide an event to pass value to Form.
@@ -51,14 +47,15 @@ export default class index extends Component {
         // Should be a controlled component.
         if ('value' in nextProps) {
           const value = nextProps.value;
-         
-        
+
+
             this.setState({url:value});
-          
+
           //
-        } 
+        }
       }
     sigCanvas = {clear:()=>{},toDataURL:(param)=>{return ""}};
+
     clear=()=>{
         this.sigCanvas.clear();
     }
@@ -70,10 +67,10 @@ export default class index extends Component {
     }
     trim=()=>{
         const formData = new FormData()
-        const xx=dataURLtoBlob(this.sigCanvas.toDataURL('image/png')) 
+        const xx=dataURLtoBlob(this.sigCanvas.toDataURL('image/png'))
         const file =  blobToFile(xx,"sign.png")
         if(file==null){
-           
+
             return
         }
         formData.append('file',file,"sign.png")
@@ -83,12 +80,12 @@ export default class index extends Component {
             processData: false,
             data: formData,
            success: (url) => {
-           
+
                if (!('value' in this.props)) {
                     this.setState({url:url});
                   }
                   this.triggerChange(url);
-             
+
                 message.success('保存成功');
             },
             error: (e) => {
@@ -101,7 +98,7 @@ export default class index extends Component {
                 }else{
                     message.error('保存失败');
                 }
-              
+
             },
           });
         //let trimmedCanvas = this.sigCanvas.getTrimmedCanvas();
@@ -127,9 +124,9 @@ export default class index extends Component {
                     <Button style={{marginLeft:12}} onClick={this.trim} size="small"  type='primary'>保存</Button></>}
                 </div>
                 </div>
-             
-                
+
+
             </div>
         )
     }
-} 
+}

one_stop_public/libs/ImgUploadCom.jsx

@@ -7,12 +7,12 @@ export default class ImgUploadCom extends React.Component {
         const value = props.value
          this.state = {
             url:value
-           
+
         }
     }
- 
-    
-   
+
+
+
       triggerChange = (changedValue) => {
         // Should provide an event to pass value to Form.
         const onChange = this.props.onChange;
@@ -31,7 +31,7 @@ export default class ImgUploadCom extends React.Component {
 
         if (info.file.status === 'done') {
           message.success(`图片上传成功`);
-        
+
           if (!('value' in this.props)) {
             this.setState({url: info.file.response });
          }
@@ -41,13 +41,13 @@ export default class ImgUploadCom extends React.Component {
         }
       }
     changePos=(obj)=>{
-     
-       
+
+
               if (!('value' in this.props)) {
                 this.setState({...obj});
             }
             this.triggerChange({...obj});
-        
+
     }
     render() {
         const{json,disabled}=this.props
@@ -60,6 +60,6 @@ export default class ImgUploadCom extends React.Component {
 
           </Upload.Dragger>
           );
-        
+
     }
-}
\ No newline at end of file
+}

one_stop_public/libs/VideoUploadCom.jsx

+import React from 'react'
+import {extend} from 'umi-request';
+import queryConfig from "@/utils/queryConfig";
+
+import {Upload, message} from 'antd';
+import {isJSON} from "@/webPublic/one_stop_public/copy";
+
+const getToken = () => {
+  const x = localStorage.getItem('uploadVideoServiceToken');
+  if(x === "null" || x === "undefined"){
+    return null;
+  }
+  return x;
+};
+
+const configService = queryConfig('uploadVideoService');
+
+const token = getToken();
+
+const umiRequest = extend({
+  // errorHandler, // 默认错误处理
+  credentials: 'omit', // 默认请求是否带上cookie
+  mode: 'cors',
+});
+
+export default class VideoUploadCom extends React.Component {
+  constructor(props) {
+    super(props);
+    const {value} = props;
+    let url = value;
+    if (isJSON(value)) {
+      url = JSON.parse(value).url;
+    }
+    this.state = {
+      url: url || '',
+    }
+  }
+
+  triggerChange = (changedValue) => {
+    // Should provide an event to pass value to Form.
+    const onChange = this.props.onChange;
+    if (onChange) {
+      onChange(changedValue);
+    }
+  };
+
+  componentWillReceiveProps(nextProps) {
+    // Should be a controlled component.
+    if ('value' in nextProps) {
+      const {value} = nextProps;
+      if (isJSON(value)) {
+        this.setState({
+          url: JSON.parse(value).url,
+        });
+      }
+    }
+  }
+
+  changeUrl = (info, key) => {
+    if (info.file.status === 'done') {
+      let filePathThis = info?.file?.response?.data?.filePath;
+      message.info('视频正在转换中,请稍后');
+      if (filePathThis) {
+        setTimeout(() => {
+          umiRequest(`${configService}/folderApi/findByPath?token=${token}&path=${filePathThis}`, {method: 'GET'}).then((res) => {
+            if (res && res.data) {
+              let info = res.data;
+              const {screenshots, url, createTime, downloadUrl, filePath} = info;
+              let needInfo = {
+                screenshots,
+                url,
+                createTime,
+                downloadUrl,
+                filePath,
+              };
+              message.success(`视频上传成功`);
+              this.triggerChange(JSON.stringify(needInfo));
+            }
+          });
+        }, 5000);
+      }
+    } else if (info.file.status === 'error') {
+      message.error(`视频上传失败`);
+    }
+  };
+
+  render() {
+    const {json, disabled} = this.props;
+    const {url} = this.state;
+    console.log(url);
+    return (
+      <Upload.Dragger disabled={disabled}
+                      accept={'.mp4,.webm,.ogg'}
+                      url={url}
+                      showUploadList={false}
+                      name="file"
+                      action={configService + '/uploadFileApi/upload'}
+                      onChange={this.changeUrl}
+                      multiple={false}
+                      data={{
+                        isConvert: true,
+                        token,
+                      }}
+                      style={{padding: 0}}>
+        {url ? <video src={url}
+                      controls
+                      style={{
+                        height: json.height,
+                        width: json.width,
+                      }}/> :
+          <div style={{height: json.height, width: json.width}}>
+
+          </div>}
+
+      </Upload.Dragger>
+    );
+
+  }
+}