Test_Project_Cocos/cocos-creator-multiplayer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

first-api & file-upload

Browse Source
This commit is contained in:
King Wang
2021-06-09 22:38:55 +08:00
parent 6c0c206b05
commit 1e3bfeb987
37 changed files with 491 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/file-upload/frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
node_modules
dist
.DS_STORE

21
examples/file-upload/frontend/package.json Normal file
View File

@@ -0,0 +1,21 @@
{
"name": "first-api-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "webpack serve --mode=development --open",
"build": "webpack --mode=production"
},
"devDependencies": {
"copy-webpack-plugin": "^9.0.0",
"html-webpack-plugin": "^5.3.1",
"ts-loader": "^9.2.3",
"typescript": "^4.3.2",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"tsrpc-browser": "^3.0.0-dev.15"
}
}

24
examples/file-upload/frontend/public/index.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TSRPC Example</title>
</head>
<body>
<h1>File Upload</h1>
<div style="background: #f2f2f2; padding: 20px;">
<p><input type="file" /></p>
<p><button>Click to Upload</button></p>
</div>
<ol>
<!-- <li><a href="XXX" target="_blank">XXX</a></li> -->
</ol>
</body>
</html>

46
examples/file-upload/frontend/src/index.ts Normal file
View File

@@ -0,0 +1,46 @@
import { HttpClient } from 'tsrpc-browser';
import { serviceProto } from './shared/protocols/serviceProto';
let client = new HttpClient(serviceProto, {
server: 'http://127.0.0.1:3000',
logger: console
});
async function upload() {
// Load File
let file = document.querySelector('input[type=file]') as HTMLInputElement;
if (!file.files || !file.files[0]) {
alert('Please select a file')
return;
}
let fileData = await loadFile(file.files[0]);
// Upload
let ret = await client.callApi('Upload', {
fileData: fileData,
fileName: file.files[0].name
});
// Error
if (!ret.isSucc) {
alert(ret.err.message);
return;
}
// Succ
document.querySelector('ol')!.innerHTML += `<li><a href="${ret.res.url}" target="_blank">${ret.res.url}</a></li>\n`;
file.value = '';
alert('Upload successfully!')
}
function loadFile(file: File): Promise<Uint8Array> {
return new Promise(rs => {
let reader = new FileReader();
reader.onload = e => {
rs(new Uint8Array(e.target!.result as ArrayBuffer))
}
reader.readAsArrayBuffer(file);
})
}
document.querySelector('button')!.onclick = upload;

8
examples/file-upload/frontend/src/shared/protocols/PtlUpload.ts Normal file
View File

@@ -0,0 +1,8 @@
export interface ReqUpload {
fileName: string,
fileData: Uint8Array
}
export interface ResUpload {
url: string;
}

59
examples/file-upload/frontend/src/shared/protocols/serviceProto.ts Normal file
View File

@@ -0,0 +1,59 @@
import { ServiceProto } from 'tsrpc-proto';
import { ReqUpload, ResUpload } from './PtlUpload';
export interface ServiceType {
api: {
"Upload": {
req: ReqUpload,
res: ResUpload
}
},
msg: {
}
}
export const serviceProto: ServiceProto<ServiceType> = {
"version": 2,
"services": [
{
"id": 0,
"name": "Upload",
"type": "api"
}
],
"types": {
"PtlUpload/ReqUpload": {
"type": "Interface",
"properties": [
{
"id": 0,
"name": "fileName",
"type": {
"type": "String"
}
},
{
"id": 1,
"name": "fileData",
"type": {
"type": "Buffer",
"arrayType": "Uint8Array"
}
}
]
},
"PtlUpload/ResUpload": {
"type": "Interface",
"properties": [
{
"id": 2,
"name": "url",
"type": {
"type": "String"
}
}
]
}
}
};

23
examples/file-upload/frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,23 @@
{
"compilerOptions": {
"lib": [
"dom",
"es2018"
],
"module": "esnext",
"target": "es2018",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"outDir": "dist",
"skipLibCheck": true,
"strict": true,
"jsx": "react-jsx",
"sourceMap": true,
"isolatedModules": true
},
"include": [
"src"
]
}

58
examples/file-upload/frontend/webpack.config.js Normal file
View File

@@ -0,0 +1,58 @@
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const isProduction = process.argv.indexOf('--mode=production') > -1;
module.exports = {
entry: './src/index.ts',
output: {
filename: 'bundle.[contenthash].js',
path: path.resolve(__dirname, 'dist'),
clean: true
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [{
loader: 'ts-loader',
options: {
compilerOptions: isProduction ? {
"lib": [
"dom",
"es2015.promise"
],
"target": "es5",
} : undefined
}
}],
exclude: /node_modules/
},
]
},
plugins: [
// Copy "public" to "dist"
new CopyWebpackPlugin({
patterns: [{
from: 'public',
to: '.',
toType: 'dir',
globOptions: {
gitignore: true,
ignore: [path.resolve(__dirname, 'public/index.html').replace(/\\/g, '/')]
},
noErrorOnMissing: true
}]
}),
// Auto add <script> to "index.html"
new HtmlWebpackPlugin({
template: 'public/index.html'
}),
],
devtool: isProduction ? false : 'inline-source-map'
}