feat

src/_test.tsx

@@ -4,54 +4,54 @@ import ReactDom from 'react-dom'
 import Modal from './components/modal/modal';
 import Upload from './components/upload/upload';
 import Tab from './components/tab/tab';
-import d8 from './8d'
-
-const _d8 = d8({
- locale: "zh"
-})
 
 function App() {
  const [visible, setVisible] = useState(false)
- return <_d8>
- <div>
- <h1>test</h1>
- <button
- onClick={() => {
- setVisible(true)
- }}
- >
- show modal
- </button>
- <Tab
- items={[
- {
- title: "tab1",
- key: "tab1",
- children: <div>test</div>
- },
- {
- title: "tab2",
- key: "tab2",
- children: <div>tab2</div>
- }
- ]}
- />
+ return <div>
+ <h1>test</h1>
+ <button
+ onClick={() => {
+ setVisible(true)
+ }}
+ >
+ show modal
+ </button>
+ <Tab
+ items={[
+ {
+ title: "tab1",
+ key: "tab1",
+ children: <div>test</div>
+ },
+ {
+ title: "tab2",
+ key: "tab2",
+ children: <div>tab2</div>
+ }
+ ]}
+ />
 
- <Modal
- // dontDestroyOnClose={true}
- onClose={() => {
- setVisible(false)
- }}
- visible={visible}
- >
- <div>
- how to set default value for typescript interface field
- <input type="text" />
- </div>
- </Modal>
- <Upload url="abc" name="robin" onClick={() => { }} />
- </div>
- </_d8>
+ <Modal
+ // dontDestroyOnClose={true}
+ onClose={() => {
+ setVisible(false)
+ }}
+ visible={visible}
+ >
+ <div>
+ how to set default value for typescript interface field
+ <input type="text" />
+ </div>
+ </Modal>
+ <Upload
+ uploadUrl='/api/video-service/upload'
+ onComplete={(res: any[]) => {
+ console.log(res[0].url)
+ }}
+ >
+ 请选择文件
+ </Upload>
+ </div>
 }
 
 ReactDom.render(<App />, document.getElementById("app"))

src/components/upload/upload.module.less

@@ -1,3 +1,10 @@
 .upload {
- color: red;
+ position: relative;
+ cursor: pointer;
+
+ input {
+ position: absolute;
+ opacity: 0;
+ width: 200px;
+ }
 }

src/components/upload/upload.test.tsx

@@ -4,7 +4,7 @@ import Upload from './upload';
 
 describe("Upload Test:", () => {
  test("Test 1: test upload:", () => {
- const { getByTitle } = render(<Upload url='robin' name="robin" onClick={() => { console.log("robin") }} />)
+ const { getByTitle } = render(<Upload url='robin' name="robin" onClick={() => { console.log("robin") }} >test</Upload>)
  var div = getByTitle('robin')
  expect(div.title).toEqual('robin')
  })

src/components/upload/upload.tsx

@@ -1,18 +1,61 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import styles from './upload.module.less';
 
 interface IUploadProps {
- url: string;
- name: string,
- onClick(): void
+ uploadUrl: string;
+ children: React.ReactNode;
+ onComplete?(data: unknown): void;
 }
 
 export default function Upload(props: IUploadProps) {
- const { onClick, url, name } = props
- return <div
- title={name}
- onClick={onClick}
- className={styles.upload}>
- {name}
- </div>
+
+ const { children, uploadUrl, onComplete } = props
+ const inputRef = useRef<any>();
+ const uploadFile = (files: FileList) => {
+ const promiese = []
+ for (let i = 0; i < files.length; i++) {
+ const p = new Promise((resolve, reject) => {
+ const xhr = new XMLHttpRequest();
+ const formData = new FormData();
+ formData.append('file', files[0])
+ xhr.open('POST', uploadUrl)
+ xhr.send(formData)
+ xhr.onerror = err => {
+ reject(err)
+ }
+ xhr.onload = () => {
+ let result;
+ try {
+ result = JSON.parse(xhr.response)
+ } catch (e) {
+ result = xhr.response;
+ }
+ resolve(result)
+ }
+ });
+ promiese.push(p)
+ }
+ Promise.all(promiese).then(res => {
+ onComplete?.(res)
+ })
+ }
+
+ return <span
+ onClick={() => {
+ inputRef.current.click();
+ }}
+ className={styles.upload}
+ >
+ {children}
+ <input
+ multiple
+ onChange={e => {
+ if (e.target.files) {
+ uploadFile(e.target.files)
+ }
+ }}
+ ref={inputRef}
+ type="file"
+ />
+ </span>
 }

webpack.config.js

@@ -7,16 +7,16 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CompressionPlugin = require("compression-webpack-plugin");
 
 const config = {
- entry: "./src/_test.tsx", 
+ entry: "./src/_test.tsx",
  mode: process.env.NODE_ENV === "development" ? "development" : "production",
  output: {
- filename: "[name].js", 
+ filename: "[name].js",
  publicPath: process.env.NODE_ENV === "development" ? "/" : "/static",
 
  path: path.resolve(__dirname, "./test")
  },
  resolve: {
- extensions: ['.js','.tsx', '.jsx'],
+ extensions: ['.js', '.tsx', '.jsx'],
  fallback: {
  'react/jsx-runtime': 'react/jsx-runtime.js',
  'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
@@ -42,9 +42,19 @@ const config = {
  },
  host: "127.0.0.1",
  hot: true, //热更新
- open:true,
+ open: true,
  compress: true, // 静态资源 开启gzip 压缩
  port: 3004, // devserver 启动端口
+ proxy: {
+ "/api": {
+ target: 'http:https://127.0.0.1:8001',
+ // changeOrigin: true,
+ secure: true,
+ pathRewrite: {
+ '/api': ''
+ }
+ }
+ }
  },
 
  module: {