上传文件给后台基本上是所有前台人员都要经历的事情。因为他和普通的将数据传送给后端不同。
今天前台拿uniapp中的上传,后台用koa框架搭建的后台做例子进行讲解。
前台界面很简单 就俩个按钮 一个上传图片 一个上传视频用的
// 前台代码
<button type="primary" @click="sendImg">上传图片</button>
<button type="primary" @click="sendVideo">上传视频</button>
// 图片的上传方法
sendImg(){
uni.chooseImage({ // 选择图片
count:1, // 一张图片 多张图片的上传 使用 promiseAll 我之前博客有写的
sourceType:['album'], // 从相册里面查找
sizeType:['original','compressed'],// 压缩
success: (res) => {
const tempFilePaths = res.tempFilePaths;// 获取图片临时资源
uni.uploadFile({
url: 'http://localhost:5000/accept', // 本地的上传接口
filePath: tempFilePaths[0], // 图片的地址
name: 'file',
formData: { // 上传图片的同时 携带 数据传送给后台 是自定义的
'name': 'touxiang.jpg', // 照片名称
'type':'img' //照片类型
},
success: (uploadFileRes) => { ／／上传成功的话 返回 后台响应的数据
console.log(uploadFileRes.data);
}
});
}
})
}，
sendVideo(){ // 上传视频和图片 差不多 只是 少了点东西
uni.chooseVideo({ // 视频是一次上传一个
success: (res) => {
const tempFilePath = res.tempFilePath;// 注意这里没有最后面的s了
uni.uploadFile({
url: 'http://localhost:5000/accept', //仅为示例，非真实的接口地址
filePath: tempFilePath,
name: 'file',
formData: { // 携带视频的描述等等
'name': 'demo.mp4',
'type':'video'
},
success: (uploadFileRes) => {
console.log(uploadFileRes.data);
}
});
}
})
}
- 好了 这下 我们的前台准备好了 我们开始写后台了
后台使用的是node.js的koa框架
提前准备好了 koa的基础环境
// 没有的话 提前安装一下
npm install koa koa-router -S
const Koa=require('koa');
const KoaRouter=require('koa-router');
var app=new Koa();
var router=new KoaRouter();
//一会这里写上传文件的路由
**********
app.use(router.routes())// 注册路由
app.listen(5000); //监听5000端口
在准备上传文件之前我们还需要安装一些依赖
npm install koa-body koa-multiparty -S
// koa-body 对上传文件的一些设置 koa-multiparty 直接是获取上传文件需要的模块
app.use(koaBody({
multiparty:true,//支持文件上传
ecoding:'gzip',
formidable:{ //对上传数据进行限制
maxFieldsSize:20*1024*1024
},
keepExtensions:true //保持上传之后文件的后缀名
}))
下来是重头戏 路由的书写
// 在这之前我们还要引入 文件的读写模块 帮我们将上传的文件资源写入到服务器上
const fs=require('fs'); // 文件读写
//文件上传接口
router.post('/accept',koaParty(),async ctx=>{
let {name,type}=ctx.req.body; // 获取前台传来的 formdata数据
let file=ctx.req.files.file; // 获取上传的文件资源
let imgPath=file.path; //获取上传文件的临时资源
const fileReader=fs.createReadStream(imgPath);// 创建一个文件读取流
// 定义文件存储路径
if(type==='img'){ //判断文件是图片还是视频存入自己的文件夹 提前建立一个public文件夹
var fileDir=__dirname+'/public/img'
}else{
var fileDir=__dirname+'/public/video'
}
// 你也可以在这里添加 如果文件夹不存在的话 就新创建一个文件夹
const filePath=`${fileDir}/${name}`;// 定义文件路径
//创建文件输出流
const fileWrite=fs.createWriteStream(filePath);
// 写入文件数据
fileReader.pipe(fileWrite);
ctx.body={
code:200,
msg:'ok'
};
})
这个时候后台也准备就绪 我们 启动 后台服务器 node app.js
然后去前台 分别上传一个 图片和视频看一看
图片和视频都上传过来了
前台的图片路径就可以改成我们后台的服务器的静态资源地址路径了
当然牛也可以把上传之后的图片路径存入到数据库中 。这些都是看你项目需要都可以对上面的进行扩展的
生活那么苦,那就笑着去面对,记得给自己吃颗糖！！！
