Vue上传文件

通过input使用自定义按钮上传本地图片到服务器上，写学校项目的时候有用到，记录一下免得以后忘记

前端代码

//上传按钮 <div class="btn_select" @click="selectLoadImg"> <div> 点击选择需要上传的图片 <input type="file" name="file" accept="image/*" @change="changeImage()" ref="avatarInput" style="display: none" > </div> </div> <button type="submit" class="btn_submit" @click="upLoad">上传图片</button>

input隐藏，绑定onchange事件，在自定义的div上使用方法出发input的方法

js的代码

//js代码 selectLoadImg() { this.$refs.avatarInput.dispatchEvent(new MouseEvent("click")); }, changeImage() { let files = this.$refs.avatarInput.files; let that = this; function readAndPreview(file) { that.file = file if (/\.(jpe?g|png|gif)$/i.test(file.name)) { let reader = new FileReader(); reader.onload = function() { if (that.imgData !== this.result) { that.imgData = this.result // 这个是base64的数据格式 } }; reader.readAsDataURL(file); } } if (files) { [].forEach.call(files, readAndPreview); } } upLoad() { let imgFile = this.file;//获取到上传的图片 let formData = new FormData();//通过formdata上传 formData.append('file', imgFile) formData.append('userId', this.userId) this.axios({ method: "post", url: "接口地址", data: formData, core: true }) .then((res) => { console.log(res.data); }) .catch((error) => { console.log(error); }) },

主要使用了axios以及FormData进行数据的上传

后台的代码

使用的是koa框架进行接收前端发送的图片

const Router = require('koa-router') const koa = require('koa'); const cors = require('koa-cors'); const koaBody = require('koa-body'); const fs = require('fs') const path = require('path') const app = new koa(); router = new Router() app.use(cors()); // 用于解决跨域的问题 app.use(koaBody({ multipart: true, // 开启文件上传，必须设置为true strict: false, formidable: { maxFileSize: 200 * 1024 * 1024, // 设置上传文件大小最大限制，默认2M keepExtensions: true // 保留文件拓展名 } })) app.use(require('koa-static')(__dirname + '/public')) router.post('/upLoad', async (ctx) => { console.log(ctx.request.files.file) // 打印文件内容 console.log(ctx.request.body) // 打印FormData的护具 const file = ctx.request.files.file; // 获取上传文件 // 创建可读流 const reader = fs.createReadStream(file.path); let filePath = path.join(__dirname, 'public/upload/') + `${file.name}`; // 创建可写流 const upStream = fs.createWriteStream(filePath); // 可读流通过管道写入可写流 reader.pipe(upStream); console.log(filePath) ctx.body = { msg: '上传成功!', url:filePath }; }) // 装载子路由 router.use('/upLoad', router.routes(), router.allowedMethods()) // 加载路由中间件 app.use(router.routes()).use(router.allowedMethods()) app.listen(3000, () => { console.log("listening port 3000"); })

新人小白，第一次写博客，之前一直知道博客记录知识很重要，但是人太懒都不想写，导致很多之前用过的东西太久没用了，好多都要重新再去看资料学习，还是乖乖写个博客记录下来吧。