黑马程序员技术交流社区

标题: Vue上传本地到后台，后台接收图片数据 [打印本页]

---

作者: 专注的一批    时间: 2020-7-3 14:44
标题: Vue上传本地到后台，后台接收图片数据
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");

})

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2