在nextjs应用路由器的服务器操作中使用axois onUploadProgress

Using axois onUploadProgress in server action in nextjs app router

提问人:Mohand GK 提问时间:11/4/2023 更新时间:11/4/2023 访问量:18

问:

我如何从服务器操作在axois中使用onUploadProgress。
这是我的代码

/**A function for uploading images to database */
export async function UploadAsync({ data, setProgress }: UploadProps) {
      "use server";

    try {
        //send image to server
        const response = await axios<string | undefined>(
            {
                baseURL: "http://localhost:3002",
                url: "/File",
                method: "POST",
                data,
                onUploadProgress: progressEvent => setProgress((progressEvent.loaded * 100) / (progressEvent.total ?? 1)),
                maxBodyLength: Infinity,
            })

        //get the file name after uploading image
        return response.status == StatusCodes.Status200OK ? response.data : undefined;
    } catch (error) {
        console.log(error)
        return undefined;
    } finally {
        //reset the progress to 0
        setProgress(0);
    }
}

我想在Porcess中上传图像时显示进度条,但我收到此错误 “错误:客户端函数无法直接传递给服务器函数。只有从服务器传递的函数才能再次传回“, 此行的错误onUploadProgress: progressEvent => setProgress((progressEvent.loaded * 100) / (progressEvent.total ?? 1))

下一个.js axios 应用程序路由器 服务器操作

评论


答: 暂无答案