前端h5拍照上传图片,vue代码如何获取文件传给后端

你可以使用HTML5的File API来获取用户选择的文件，然后使用Vue.js的Axios库将文件发送给后端。HTML5的File API可以通过input[type=file]元素来实现。你可以在Vue.js的template中添加以下代码来创建一个文件选择器：

<template>
  <div>
    <input type="file" @change="onFileChange">
  </div>
</template>

接着，你可以在Vue.js的methods中添加以下代码来获取用户选择的文件并发送到后端：

<script>
import axios from 'axios';

export default {
  methods: {
    onFileChange(event) {
      const file = event.target.files[0];

      // 创建一个FormData对象
      const formData = new FormData();
      formData.append('file', file);

      // 发送文件到后端
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log(response.data);
      });
    }
  }
};
</script>

在上面的代码中，我们使用Axios库发送了一个POST请求到`/api/upload`接口，并将文件作为FormData对象的一部分发送。在发送请求时，我们设置了`Content-Type`为`multipart/form-data`，这是发送二进制数据时必须设置的请求头。在服务器端，你可以使用类似于`multer`库来处理上传的文件。