vben
5 years ago
14 changed files with 202 additions and 70 deletions
@ -0,0 +1,27 @@ |
|||
<template> |
|||
<span class="thumb"> |
|||
<img v-if="fileUrl" :src="fileUrl" /> |
|||
</span> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { propTypes } from '/@/utils/propTypes'; |
|||
|
|||
export default defineComponent({ |
|||
props: { |
|||
fileUrl: propTypes.string.def(''), |
|||
fileName: propTypes.string.def(''), |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.thumb { |
|||
img { |
|||
position: static; |
|||
display: block; |
|||
width: 104px; |
|||
height: 104px; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,26 +0,0 @@ |
|||
<template> |
|||
<span> |
|||
<img v-if="fileUrl" :src="fileUrl" /> |
|||
<span v-else>{{ fileType }}</span> |
|||
</span> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { defineComponent, PropType } from 'vue'; |
|||
|
|||
export default defineComponent({ |
|||
props: { |
|||
fileUrl: { |
|||
type: String as PropType<string>, |
|||
default: '', |
|||
}, |
|||
fileType: { |
|||
type: String as PropType<string>, |
|||
default: '', |
|||
}, |
|||
fileName: { |
|||
type: String as PropType<string>, |
|||
default: '', |
|||
}, |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,15 @@ |
|||
# Upload Server |
|||
|
|||
Simple file upload service for testing file upload components. |
|||
|
|||
## Usage |
|||
|
|||
```js |
|||
|
|||
cs ./test/upload-server |
|||
|
|||
yarn install |
|||
|
|||
node app.js |
|||
|
|||
``` |
|||
@ -0,0 +1,101 @@ |
|||
const Koa = require('koa'); |
|||
const fs = require('fs'); |
|||
const path = require('path'); |
|||
const router = require('koa-router')(); |
|||
const koaBody = require('koa-body'); |
|||
const static = require('koa-static'); |
|||
const cors = require('koa2-cors'); |
|||
const app = new Koa(); |
|||
|
|||
app.use(cors()); |
|||
|
|||
app.use( |
|||
koaBody({ |
|||
multipart: true, |
|||
formidable: { |
|||
maxFieldsSize: 20 * 1024 * 1024, |
|||
multipart: true, |
|||
}, |
|||
}) |
|||
); |
|||
|
|||
const uploadUrl = 'http://localhost:3001/static/upload'; |
|||
|
|||
router.get('/', (ctx) => { |
|||
ctx.type = 'html'; |
|||
const pathUrl = path.join(__dirname, '/static/upload.html'); |
|||
ctx.body = fs.createReadStream(pathUrl); |
|||
}); |
|||
|
|||
const uploadFilePublic = function (ctx, files, flag) { |
|||
const filePath = path.join(__dirname, '/static/upload/'); |
|||
let fileReader, fileResource, writeStream; |
|||
|
|||
const fileFunc = function (file) { |
|||
fileReader = fs.createReadStream(file.path); |
|||
fileResource = filePath + `/${file.name}`; |
|||
|
|||
writeStream = fs.createWriteStream(fileResource); |
|||
fileReader.pipe(writeStream); |
|||
}; |
|||
const returnFunc = function (flag) { |
|||
console.log(flag); |
|||
console.log(files); |
|||
if (flag) { |
|||
let url = ''; |
|||
for (let i = 0; i < files.length; i++) { |
|||
url += uploadUrl + `/${files[i].name},`; |
|||
} |
|||
url = url.replace(/,$/gi, ''); |
|||
ctx.body = { |
|||
url: url, |
|||
code: 0, |
|||
message: '上传成功', |
|||
}; |
|||
} else { |
|||
ctx.body = { |
|||
url: uploadUrl + `/${files.name}`, |
|||
code: 0, |
|||
message: '上传成功', |
|||
}; |
|||
} |
|||
}; |
|||
if (flag) { |
|||
// 多个文件上传
|
|||
for (let i = 0; i < files.length; i++) { |
|||
const f1 = files[i]; |
|||
fileFunc(f1); |
|||
} |
|||
} else { |
|||
fileFunc(files); |
|||
} |
|||
|
|||
if (!fs.existsSync(filePath)) { |
|||
fs.mkdir(filePath, (err) => { |
|||
if (err) { |
|||
throw new Error(err); |
|||
} else { |
|||
returnFunc(flag); |
|||
} |
|||
}); |
|||
} else { |
|||
returnFunc(flag); |
|||
} |
|||
}; |
|||
|
|||
router.post('/upload', (ctx) => { |
|||
let files = ctx.request.files.file; |
|||
if (files.length === undefined) { |
|||
uploadFilePublic(ctx, files, false); |
|||
} else { |
|||
uploadFilePublic(ctx, files, true); |
|||
} |
|||
}); |
|||
|
|||
app.use(static(path.join(__dirname))); |
|||
|
|||
app.use(router.routes()).use(router.allowedMethods()); |
|||
|
|||
app.listen(3001, () => { |
|||
console.log('server is listen in 3001'); |
|||
}); |
|||
@ -0,0 +1,13 @@ |
|||
{ |
|||
"name": "server", |
|||
"version": "1.0.0", |
|||
"main": "index.js", |
|||
"license": "MIT", |
|||
"dependencies": { |
|||
"koa": "^2.13.0", |
|||
"koa-body": "^4.2.0", |
|||
"koa-router": "^10.0.0", |
|||
"koa-static": "^5.0.0", |
|||
"koa2-cors": "^2.0.6" |
|||
} |
|||
} |
|||
Loading…
Reference in new issue