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

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],
@@ -59,6 +55,7 @@ export default class index extends Component {
         }
       }
     sigCanvas = {clear:()=>{},toDataURL:(param)=>{return ""}};
+
     clear=()=>{
         this.sigCanvas.clear();
     }

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>
+    );
+
+  }
+}