vue上传图片到后端

// Vue 组件示例代码：上传图片到后端

<template>
  <div>
    <input type="file" @change="onFileChange">
    <button @click="uploadImage">上传图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null
    };
  },
  methods: {
    onFileChange(event) {
      // 当用户选择文件时，将文件保存到组件的 data 中
      this.selectedFile = event.target.files[0];
    },
    async uploadImage() {
      if (!this.selectedFile) {
        alert("请选择一个文件");
        return;
      }

      const formData = new FormData();
      formData.append('image', this.selectedFile);

      try {
        // 使用 fetch API 发送 POST 请求到后端接口
        const response = await fetch('https://your-backend-endpoint.com/upload', {
          method: 'POST',
          body: formData
        });

        if (response.ok) {
          const result = await response.json();
          console.log('上传成功:', result);
        } else {
          console.error('上传失败');
        }
      } catch (error) {
        console.error('网络错误:', error);
      }
    }
  }
};
</script>

解释说明：

1. HTML 部分：

   • 使用 <input type="file"> 允许用户选择文件。
   • 使用 @change="onFileChange" 监听文件选择的变化，并调用 onFileChange 方法。

2. JavaScript 部分：

   • data() 中定义了一个 selectedFile 变量来存储用户选择的文件。
   • onFileChange(event) 方法在用户选择文件时被触发，将选中的文件保存到 selectedFile 中。
   • uploadImage() 方法用于处理图片上传逻辑：
     • 检查是否选择了文件。
     • 创建 FormData 对象并将文件添加进去。
     • 使用 fetch 发送 POST 请求到后端接口。
     • 处理响应结果并输出成功或失败信息。

3. 注意事项：

   • 替换 'https://your-backend-endpoint.com/upload' 为实际的后端接口地址。
   • 后端需要支持接收 multipart/form-data 类型的请求。