完成了加密传输文件的功能

package.json

@@ -22,6 +22,7 @@
     "react": "^17.0.2",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
+    "react-file-reader": "^1.1.4",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",

src/components/Page/UploadFile.js

@@ -1,16 +1,21 @@
 import React, {Component} from "react";
-import {Button, Form, message, Upload} from "antd";
+import {Button, Form, Input, message, Tabs, Upload} from "antd";
 import getCookie from "../../utils/getCookie";
-import {InboxOutlined, UserOutlined} from "@ant-design/icons";
-import {apiUploadFile} from "../../services/API/API";
+import {InboxOutlined, UsergroupAddOutlined} from "@ant-design/icons";
+import {apiUpload, apiUploadFile} from "../../services/API/API";
 import {file} from "ant-design-icons";
+import ReactFileReader from "react-file-reader";
 import './UploadFile.less'
 
 const {Dragger} = Upload;
 
+const {TabPane} = Tabs;
+
 class UploadFile extends Component {
     state = {
-        fileList: []
+        fileList: [],
+        files: '',
+        file_name: ''
     }
 
     constructor(props) {
@@ -51,6 +56,35 @@ class UploadFile extends Component {
         })
     };
 
+    handleUploadEnFile = () => {
+        let fatherFolderId = this.props.fatherFolderId;
+        let params = {
+            username: getCookie('username'),
+            token: getCookie('token'),
+            father_folder_id: fatherFolderId,
+            file_b64: this.state.files,
+            file_name: this.state.file_name
+        }
+        console.log(params)
+        apiUpload(params).then(res => {
+            if (res.data.code === 200) {
+                message.success('上传成功');
+                this.props.cdFolder(this.props.fatherFolderId)
+            } else {
+                message.error(res.data.error)
+            }
+        })
+    };
+
+    handleFiles = (files) => {
+        this.setState({
+            files: files.base64,
+            file_name: files.fileList[0].name
+        })
+        this.handleUploadEnFile()
+        this.clickButton()
+    }
+
     beforeUpload = file => {
         this.setState({
             fileList: [...this.state.fileList, file]
@@ -61,40 +95,65 @@ class UploadFile extends Component {
     render() {
         return (
             <div className={'UploadFile-div'}>
-                <Form onFinish={this.handleUploadFile} initialValues={{remember: true}}>
-                    <Form.Item
-                        name="upload"
-                        rules={[{required: true, message: 'Please upload file!'}]}
-                    >
-                        <Dragger
-                            beforeUpload={this.beforeUpload}
-                            name={'upload'}
-                            multiple={false}
-                            maxCount={1}
+                <Tabs
+                    defaultActiveKey="1"
+                    size={'large'}
+                    animated={true}
+                    centered={true}
+                    tabBarGutter={50}
+                >
+                    <TabPane
+                        tab='Not Encrypted'
+                        key="1"
+                        style={{padding: "20px 30px 10px"}}>
+                        <Form onFinish={this.handleUploadFile} initialValues={{remember: true}}>
+                            <Form.Item
+                                name="upload"
+                                rules={[{required: true, message: 'Please upload file!'}]}
+                            >
+                                <Dragger
+                                    beforeUpload={this.beforeUpload}
+                                    name={'upload'}
+                                    multiple={false}
+                                    maxCount={1}
+                                >
+                                    <p className="ant-upload-drag-icon">
+                                        <InboxOutlined/>
+                                    </p>
+                                    <p className="ant-upload-text">Click or drag file to this area to upload</p>
+                                    <p className="ant-upload-hint">
+                                        Support for a single or bulk upload. Strictly prohibit from uploading company
+                                        data or
+                                        other
+                                        band files
+                                    </p>
+                                </Dragger>
+                            </Form.Item>
+                            <Form.Item style={{height: "1px"}}>
+                                <Button size="large" type="primary" htmlType="submit" id="upload-file-form-button"
+                                        style={{
+                                            width: '100%',
+                                            display: 'none',
+                                            float: 'bottom',
+                                            marginBottom: '100vh'
+                                        }}>
+                                    Upload
+                                </Button>
+                            </Form.Item>
+                        </Form>
+                    </TabPane>
+                    <TabPane tab="Encrypt" key="2" style={{padding: "20px 30px 0"}}>
+                        <ReactFileReader
+                            base64={true}
+                            multipleFiles={false}
+                            handleFiles={this.handleFiles}
                         >
-                            <p className="ant-upload-drag-icon">
-                                <InboxOutlined/>
-                            </p>
-                            <p className="ant-upload-text">Click or drag file to this area to upload</p>
-                            <p className="ant-upload-hint">
-                                Support for a single or bulk upload. Strictly prohibit from uploading company data or
-                                other
-                                band files
-                            </p>
-                        </Dragger>
-                    </Form.Item>
-                    <Form.Item style={{height: "1px"}}>
-                        <Button size="large" type="primary" htmlType="submit" id="upload-file-form-button"
-                                style={{
-                                    width: '100%',
-                                    display: 'none',
-                                    float: 'bottom',
-                                    marginBottom: '100vh'
-                                }}>
-                            Upload
-                        </Button>
-                    </Form.Item>
-                </Form>
+                            <Button>
+                                Select File
+                            </Button>
+                        </ReactFileReader>
+                    </TabPane>
+                </Tabs>
             </div>
         )
     }

src/services/API/API.js

@@ -172,4 +172,13 @@ export function apiQuitGroup(params) {
         method: 'post',
         data: Qs.stringify(params),
     })
+}
+
+export function apiUpload(params) {
+    let encryptobj = new EncryptObj()
+    return encryptobj.postData({
+        url: '/file/upload_file/',
+        method: 'post',
+        data: Qs.stringify(params),
+    })
 }

yarn.lock

@@ -9432,7 +9432,7 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10024,6 +10024,14 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-file-reader@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npm.taobao.org/react-file-reader/download/react-file-reader-1.1.4.tgz#1838f1f3fa70dcfdef4ef525d74dda3c6312089a"
+  integrity sha1-GDjx8/pw3P3vTvUl103aPGMSCJo=
+  dependencies:
+    prop-types "^15.5.0"
+    uuid4 "^1.0.0"
+
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -12072,6 +12080,11 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
+uuid4@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.nlark.com/uuid4/download/uuid4-1.1.4.tgz#80fa0618749110bdb8aa47cc2cc2167c6331f4eb"
+  integrity sha1-gPoGGHSREL24qkfMLMIWfGMx9Os=
+
 uuid@^3.3.2, uuid@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"