Vue上传文件
通过input使用自定义按钮上传本地图片到服务器上，写学校项目的时候有用到，记录一下免得以后忘记
前端代码
//上传按钮
点击选择需要上传的图片
@change="changeImage()"
ref="avatarInput"
style="display: none"
>
上传图片
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.fx61.com/brokerlist/HantecMarkets.html
后台的代码
使用的是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");
})
|
|
收藏
淘帖
踩
