模拟post提交数据-使用json方式；使用form-data按钮方式

展示：

file按钮：

<input
          ref="fileInput"
          type="file"
          accept="image/*"
          capture="environment"
          @change="handleImageUpload"
          style="display: none"
        />

使用json方式：

 const handleImageUpload = async (event) => {

      if (event) {
        const file = event.target.files[0];
        const photoURL = URL.createObjectURL(file);
        photo.value = photoURL;
      } 
      
      
      
      if (photo.value){
        
        
        //  randomImage.value = images.value[Math.floor(Math.random() * images.value.length)];
        randomImage.value = "http://192.168.3.215:8001/images_database/"+best_match.value;

        try {
          const response = await fetch("/api_find_match/find_match", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              query_image_name: "wk2.jpg",
            }),
          });

          // 解析返回的JSON数据
          const data = await response.json();
          console.log(data);

          // 将返回的数据赋值给响应式变量
          best_match.value = data.best_match;
          similarity.value = data.similarity;
        } catch (error) {
          console.error("请求失败:", error);
        }
      }
    };

使用form-data的上传按钮方式：

<input
  ref="fileInput"
  type="file"
  accept="image/*"
  capture="environment"
  @change="handleImageUpload"
  style="display: none"
/>

<script setup>
import { ref } from 'vue';

const photo = ref(null);
const randomImage = ref(null);
const best_match = ref(null);
const similarity = ref(null);

const handleImageUpload = async (event) => {
  if (event) {
    const file = event.target.files[0];
    const photoURL = URL.createObjectURL(file);
    photo.value = photoURL;

    if (photo.value) {
      // 将图片上传到后台并获取最匹配的结果
      randomImage.value = "http://192.168.3.215:8001/images_database/" + best_match.value;

      const formData = new FormData();
      formData.append("query_image", file);

      try {
        const response = await fetch("/api_find_match/find_match", {
          method: "POST",
          body: formData, // 使用 form-data 发送文件
        });

        // 解析返回的JSON数据
        const data = await response.json();
        console.log(data);

        // 将返回的数据赋值给响应式变量
        best_match.value = data.best_match;
        similarity.value = data.similarity;
      } catch (error) {
        console.error("请求失败:", error);
      }
    }
  }
};
</script>

以上仅供参考。