Vue 可组合的 POST 请求到 api

Vue Composable for POST request to api

提问人:vinopij123 提问时间:9/27/2023 更新时间:9/27/2023 访问量:32

问:

我在为 POST 请求创建 Vue 可组合项时遇到问题。不知道我是否在这段代码的良好方向上,因为当我尝试测试它时,它接收状态 400。

import { ref } from 'vue';
import type { Ref } from 'vue';

interface ImageData {
    id: number;
    name: string;
}

const apiUrl = 'myApi';

const useImageUpload = () => {
    const imagesList: Ref<ImageData[]> = ref([]);

    const uploadImage = async (image: File): Promise<ImageData> => {
        const formData = new FormData();
        formData.append('image', image);

        try {
            const uploadResponse = await fetch(`${apiUrl}/image`, {
                method: 'POST',
                body: formData,
            });

            if (!uploadResponse.ok) {
                throw new Error('Image upload failed');
            }

            const uploadedImageData: ImageData = await uploadResponse.json();

            const imageResponse = await fetch(`${apiUrl}/images/${uploadedImageData.id}`);

            if (!imageResponse.ok) {
                throw new Error('Fetching image data failed');
            }

            const imageData: ImageData = await imageResponse.json();
            imagesList.value.push(imageData);
            return imageData;
        } catch (error) {
            return Promise.reject(error);
        }
    };

    return {
        uploadImage,
        imagesList,
    };
};

export default useImageUpload;

我在哪里可以找到代码正在工作,但 api 阻止了某些内容?

发布 vuejs3 可组合

评论


答: 暂无答案