Node.js Cloudinary文件上载/ReactJs/Express节点无法获取响应_Node.js_Reactjs_Express_File Upload_Cloudinary

Node.js Cloudinary文件上载/ReactJs/Express节点无法获取响应

node.js reactjs express file-upload

Node.js Cloudinary文件上载/ReactJs/Express节点无法获取响应,node.js,reactjs,express,file-upload,cloudinary,Node.js,Reactjs,Express,File Upload,Cloudinary,尝试在cloudinary上使用Express/Node进行文件上载工作时运气不佳。我能够发布请求，我的文件被上载到cloudinary服务器，但从未收到响应，导致我的请求超时。我使用[Express file upload][1]将数据作为比特流发送到cloudinary，并使用axios进行发布我的快速路由器API代码： const fileUpload = require("express-fileupload"); const cloudinary = require("cloudin

尝试在cloudinary上使用Express/Node进行文件上载工作时运气不佳。我能够发布请求，我的文件被上载到cloudinary服务器，但从未收到响应，导致我的请求超时。我使用[Express file upload][1]将数据作为比特流发送到cloudinary，并使用axios进行发布

我的快速路由器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

来自组件的My 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。有人能告诉我我做错了什么吗？

这里有几件事需要纠正

A）不需要创建这个

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

B）在imgSrc状态下，您已经有了数据url。只需将其作为post参数发送到express服务器即可

大概是这样的：-

     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进行图像上传的最佳方式，我建议您阅读更多关于它的内容，并了解其他人是如何做到这一点的

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

这里有两件事需要纠正