input框上传文件并传给后端

1、HTML部分

<template>
  <div class="container">
    <input id="input" type="file" name="image">
    <button type="submit" @click="onFile">提交</button>
  </div>
</template>

2、script部分

<script>
// 引入上传图片接口
import { uploadImage } from '../../../api/login/loginRegApi'
export default {
  methods: {
    onFile () {
      // 获取到上传的文件
      var myFile = document.getElementById('input').files[0];
      console.log(myFile);
      // 获取到文件不能直接传给后端
      // 利用formData传给后端
      var formData = new FormData();
      formData.append('image',myFile); // 'image'要和后端接口需要的参数名一致
      // 上传图片接口
      uploadImage(formData).then(res => {
        if (res.code === 200) {
          console.log(res.data);
        }
      })
    }
  }
}
</script>

这样就可以上传图片给后端了