Vue上传本地到后台，后台接收图片数据

Vue上传文件

通过input使用自定义按钮上传本地图片到服务器上，写学校项目的时候有用到，记录一下免得以后忘记

前端代码

//上传按钮
<div class="btn_select" @click="selectLoadImg">
	<div>
		点击选择需要上传的图片
		<input type="file" name="file" accept="image/*"
		@change="changeImage()"
		ref="avatarInput"
		style="display: none"
		>
	</div>
</div>
<button type="submit" class="btn_submit" @click="upLoad">上传图片</button>

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进行数据的上传

后台的代码

使用的是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");
})

新人小白，第一次写博客，之前一直知道博客记录知识很重要，但是人太懒都不想写，导致很多之前用过的东西太久没用了，好多都要重新再去看资料学习，还是乖乖写个博客记录下来吧。