Vue上傳本地到後臺，後臺接收圖片數據

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");

})