前端h5者点击图库上传图片,vue代码如何获取文件传给后端

在Vue中点击图库上传图片并传给后端，与拍照上传类似，也需要使用input元素来选择文件。不同的是，我们需要设置accept属性为'image/*'，以限制文件类型为图片。

以下是实现步骤：

1. 在HTML中添加一个input元素，并设置type为file，accept为'image/*'，用于选择图片：

<template>
  <div>
    <input type="file" ref="fileInput" accept="image/*" @change="uploadImage">
  </div>
</template>

2. 在Vue组件中定义uploadImage方法来获取图片并上传到后端，与上面的uploadFile方法类似：

<script>
export default {
  methods: {
    uploadImage() {
      const image = this.$refs.fileInput.files[0]  // 获取选择的图片
      const formData = new FormData()  // 创建FormData对象，用于发送图片数据
      formData.append('image', image)  // 将图片添加到FormData中

      // 使用axios发送POST请求，将图片数据发送到后端
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'  // 设置请求头为multipart/form-data，以支持文件上传
        }
      }).then(response => {
        console.log(response.data)
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

3. 在后端接收图片数据并进行处理，与上面的处理文件上传类似，这里就不再赘述。

以上就是在Vue中点击图库上传图片并传给后端的基本步骤。