vue3 typescript 如何将图片发送给API

在 Vue3 中结合 TypeScript 使用，如果你想将图片发送到 API，通常会涉及到文件上传功能。你可以通过 Axios 或其他 HTTP 客户端库来发送POST请求，并使用FormData来处理二进制数据。以下是步骤：

1. 首先安装所需依赖：

npm install axios @types/axios

2. 创建一个组件实例，引入 Axios 并定义一个方法用于上传图片：

import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  data() {
    return {
      fileInputRef: ref(null), // 图片输入框引用
      uploadedFile: null, // 存储上传的文件
    };
  },
  methods: {
    async uploadImage(file) {
      if (!file) return;
      try {
        const formData = new FormData();
        formData.append('image', file); // 将文件添加到formData中，键名通常对应服务器API接收字段

        // 发送POST请求
        const response = await axios.post(
          '/api/upload', // 替换为你实际的API地址
          formData,
          {
            headers: {
              'Content-Type': 'multipart/form-data', // 设置正确的 Content-Type
            }
          }
        );

        // 处理响应结果
        this.uploadedFile = response.data; // 假设API返回的是文件ID或其他响应信息
      } catch (error) {
        console.error('Upload error:', error);
      }
    },
  },
  setup() {
    onMounted(() => {
      // 绑定事件监听，当用户选择文件时触发uploadImage方法
      this.fileInputRef.value.addEventListener('change', (event) => {
        const selectedFiles = event.target.files;
        if (selectedFiles.length > 0) {
          const file = selectedFiles[0];
          this.uploadImage(file);
        }
      });
    });
  }
}

3. HTML模板部分绑定input元素和显示已上传的文件：

<template>
  <div>
    <input type="file" ref="fileInputRef" @change="uploadImage" />
    <p>已上传的文件：{{ uploadedFile }}</p>
  </div>
</template>