vue上传文件通过input和使用自定义按钮将本地图片上传到服务器。在编写学校项目时很有用。记录一下，以免以后忘记前端代码//点击上传按钮选择要上传的图片@change="changeImage()"ref="avatarInput">上传图片输入隐藏，绑定onchange事件,在自定义div上使用method启动输入法js代码refs.avatarInput.files;letthat=this;functionreadAndPreview(file){that.file=fileif(/\.(jpe?g|png|gif)$/i.test(file.name)){letreader=newFileReader();reader.onload=function(){if(that.imgData!==this.result){that.imgData=this.结果//这是base64数据格式}};reader.readAsDataURL(file);}}if(files){[].forEach.call(files,readAndPreview);}}upLoad(){letimgFile=this.file;//获取上传的图片letformData=newFormData();//通过formdata上传formDataformData.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框架接收前端发送的图片。constRouter=require('koa-router')constkoa=require('koa');constcors=require('koa-cors');constkoaBody=require('koa-body');constfs=require('fs')constpath=require('path')constapp=newkoa();router=newRouter()app.use(cors());//用于解决跨域问题app.use(koaBody({multipart:true,//启用文件上传，必须设置为truestrict:false,formidable:{maxFileSize:200*1024*1024,//设置最大上传文件大小限制，默认2MkeepExtensions: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的装甲constfile=ctx.request.files.file;//获取上传的文件//创建一个可读流constreader=fs.createReadStream(file.path);letfilePath=path.join(__dirname,'public/upload/')+`${file.name}`;//创建可写流constupStream=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("监听端口3000");})
