Cloudinary File-Upload/ReactJs/Express 节点无法获得响应

Question

尝试在 cloudinary 上使用 Express/Node 进行文件上传工作，但 luck.I 无法 post 请求，我的文件已上传到 cloudinary 服务器，但从未获取导致我请求时间 out.I 的响应使用 [express-file-upload][1] 将数据作为比特流发送到 cloudinary，并将 axios 发送到 post 它。

我的 Express 路由器 API 代码：

const fileUpload = require("express-fileupload");
const cloudinary = require("cloudinary");

    router.use(fileUpload());

    cloudinary.config({
        cloud_name: "xyx",
        api_key: "xyxxyxxyxxyxxyx",
        api_secret: "xyxxyxxyxxyxxyxxyx"
    });

    router.post("/upload", function(req, res, next) {
        console.log(req);
        var fileGettingUploaded = req.files.file.data;

        cloudinary.uploader
            .upload_stream({ resource_type: "raw" }, function(error, result) {
                console.log(error);
                console.log(result);
            })
            .end(fileGettingUploaded);
    });

  [1]: https://www.npmjs.com/package/express-fileupload

我的 Axios Post 来自组件的请求

const { fileName } = this.state;
        const formData = new FormData();
        formData.append("file", fileName);
        const url = `/api/upload`;
        axiosInstance
            .post(url, formData, {
                headers: {
                    "Content-Type": fileName.type
                }
            })
            .then(response => {
                if (response.status === 200 && response.data) {
                    console.log(response);
                }
            })
            .catch(error => {
                console.log(error);
            });
    };

这导致成功将我的文件上传到 cloudinary 的请求（我可以在 cloudinary 的仪表板中看到上传的文件）但无法给我一个响应，理想情况下应该是 url 上传的 file.Can 谁能指导我做错了什么？

Answer 1

这里有几件事需要纠正。

A) 无需创建此

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

B) 在您的 imgSrc 状态下，您已经拥有数据 url.Just 将其作为 post 参数发送到您的快速服务器。

像这样：-

     uploadPicture = () => {
        const { fileName, imgSrc } = this.state;
        const url = `/api/upload`;
        axiosInstance
            .post(url, {
                fileUrl: imgSrc
            })
            .then(response => {
                if (response.status === 200 && response.data) {
                    console.log(response);
                }
            })
            .catch(error => {
                console.log(error);
            });
    };

c) 在您的节点服务器上从 req.body

读取 url

router.post("/upload", function(req, res, next) {
    const fileGettingUploaded = req.body.fileUrl;

    cloudinary.uploader.upload(fileGettingUploaded, function(result, error) {
        if (result) {
            res.status(200).json(result);
        } else {
            res.status(500).json(error);
        }
    });
});

这应该可以解决您的问题。

我不太确定这是否是使用 cloudinary 处理图像上传的最佳方式，我建议您阅读更多相关信息，看看其他人是如何做到的。

目前这应该可以解决您的问题。

Cloudinary File-Upload/ReactJs/Express 节点无法获得响应

Cloudinary File-Upload/ReactJs/Express Node Unable to get response

file-upload

node.js

express

cloudinary

reactjs