Vue 上传文件
通过 input 使用自定义按钮上传本地图片到服务器上，写学校项目的时候有用到，记录一下免得以后忘记
前端代码
// 上传按钮
点击选择需要上传的图片
@change=”changeImage()”
ref=”avatarInput”
>
上传图片
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 进行数据的上传
后台的代码
智汇代理申请 https://www.kaifx.cn/broker/t…
使用的是 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”);
})