- 客户端的准备：采用Vue+iview的Upload组件实现。
<template>
<div>
<Upload
ref="upload"
:show-upload-list="true"
:default-file-list="defaultList"
:on-success="handleSuccess"
:max-size="2048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload"
multiple
type="drag"
action="//jsonplaceholder.typicode.com/posts/">
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>Click or drag files here to upload</p>
</div>
</Upload>
</div>
<script>
export default {
data() {
return {
defaultList:[]
}
},
methods:{
handleBeforeUpload(){
},
handleSuccess(){
},
handleFormatError(){
},
handleMaxSize(){
}
}
}
</script>
</template>
可以发现，上面的代码我只是从官网上随便拷贝了一下做了简单的修改，但已经可以将文件上传到iview提供的服务器上，也就是说现在只需要修改一下action的值为Koa2提供的API即可，至于一些后续的扩展待API实现了后再慢慢的讲解。
- 服务器端的处理：采用Koa2实现
输入npm init，初始化项目
输入npm install koa2 --save下载koa2的依赖包
输入npm install koa-router -save下载koa2路由依赖包
const Koa=require('koa2');
const app=new Koa;
const Router=require('koa-router');
var router=new Router;
const fs=require('fs');
function parsePostData(ctx){
return new Promise((resolve,reject)=>{
try{
let postdata;
ctx.req.on('data',(data)=>{
postdata=data;
})
ctx.req.addListener('end',()=>{
let filename=Date.now().toString()+'.文件的后缀名';
fs.writeFile('./upload/'+filename,postdata,function(err){
if(err){
reject(err);
}
resolve(filename);
});
});
}catch(err){
reject(err);
}
})
}
router.post('/upload',async ctx=>{
var fileName=await parsePostData(ctx);
ctx.body={
code:200,
fileName:fileName
}
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000,()=>{
console.log("服务器已开启！");
});
从代码中可以看出,上面的代码遇到了一个问题，就是如何获取文件的后缀名，另外还有一个隐藏的问题，假设认为后缀名就是.txt，在上传完文件后，打开服务器上保存的文件，会发现存在一些原来文本内容当中不存在的内容，这是因为根据RFC 1867协议导致的，不过目前本人无法解决，所以在这里我就放弃了该思路，如果有了解的小伙伴欢迎私信与我探讨。
自己写不出来但是可以发现有现成的koa-multer依赖包可以用，故而
输入npm install koa-multer --save下载koa-multer
输入npm install koa2-cors --save解决跨域的问题
输入npm install koa-static --save实现静态资源访问
const Koa=require('koa2');
const app=new Koa;
const fs=require('fs');
const path = require('path')
const static = require('koa-static')
const staticPath = './upload'
app.use(static(
path.join( __dirname, staticPath)
))
//解决跨域
const cors=require('koa2-cors');
app.use(cors());
const Router=require('koa-router');
var router=new Router;
//引用multer实现文件上传与下载
const multer=require('koa-multer');
//配置单文件上传的路径
var storage = multer.diskStorage({
//定义文件保存路径
destination:function(req,file,cb){
cb(null,'./upload/');//路径根据具体而定。如果不存在的话会自动创建一个路径
}, //注意这里有个，
//修改文件名
filename:function(req,file,cb){
var fileFormat = (file.originalname).split(".");
cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
}
})
var upload = multer({ storage: storage });
router.post('/upload',upload.single('file'),async (ctx,next)=>{
ctx.body={
filename:ctx.req.file.filename
}
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000,()=>{
console.log("服务器已开启！");
});
利用multer就很快速的实现了文件的上传功能，再回过头来完善客户端的功能。
- 客户端的完善
将action的值修改为http://localhost:3000/upload，打开页面，任意上传几个文件，可以发现一点问题都没有。
客户端上传效果
增加文件上传个数的限制
根据文档，可以发现存在一个before-upload的钩子函数，即文件上传之前的钩子函数，所以该需求的实现方法如下。
handleBeforeUpload(){
const check = this.$refs.upload.fileList.length < 2;
if (!check) {
this.$Notice.warning({
title: '最多只能上传两个文件！'
});
}
return check;
},
阻止文件上传，当点击某一个按钮的时候再批量上传
阻止文件上传根据官方文档可以知道只需在before-upload钩子函数内返回false即可，故而利用
this.$refs.upload.upload(file);
是实现不了上传的，那么只能自己发请求去处理了。
<template>
<div>
<Upload
ref="upload"
:show-upload-list="false"
:max-size="2048"
:before-upload="handleBeforeUpload"
multiple
type="drag"
action="http://localhost:3000/upload">
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>Click or drag files here to upload</p>
</div>
</Upload>
<Button type="primary" @click="startPost">开始上传</Button>
<div v-for="(item,index) in uploadList" :key="index">
<Progress :percent="item.percentage"></Progress>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
uploadList:[]
}
},
mounted(){
this.uploadList=this.$refs.upload.fileList;
},
methods:{
startPost(){
this.$refs.upload.fileList.forEach(file=>{
//this.$refs.upload.upload(file); 由于已经在handleBeforeUpload方法当中阻止了，所以该方法上传不了
var formFile = new FormData();
let config = {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: (progressEvent) => {
// 使用本地 progress 事件
if (progressEvent.lengthComputable) {
let num = Math.round((progressEvent.loaded / progressEvent.total) * 100)
// 使用某种 UI 进度条组件会用到的百分比
file.percentage = num;
this.$nextTick(()=>{
//在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
this.uploadList=[...this.$refs.upload.fileList]
});
}
}
}
formFile.append("file", file);
axios.post("http://localhost:3000/upload", formFile, config).then(res=> {
console.log(res,"上传成功！");
}).catch(function (error) {
console.log(error,"上传失败！");
});
});
},
handleBeforeUpload(file){
const check = this.$refs.upload.fileList.length < 2;
if (!check) {
this.$Notice.warning({
title: '最多只能上传两个文件！'
});
return check;
}
file.percentage=0;
this.$refs.upload.fileList.push(file);
return false;
}
}
}
</script>
最后至于如何在样式上设计可以参考官网最后一个案例。
网友评论