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

时间:2018-03-11 19:36:46

标签: node.js reactjs express file-upload cloudinary

尝试在cloudinary上使用Express / Node进行文件上传工作,没有运气。我能够发布请求,我的文件上传到cloudinary服务器但从未得到响应,导致我的请求时间out。我使用[express-file-upload] [1]将数据作为比特流和axios发送到cloudinary发布。

My 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发布请求

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的回复。可以有谁引导我做错了什么?

1 个答案:

答案 0 :(得分: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进行图片上传的最佳方式,我建议您阅读更多有关它的内容,看看其他人是如何做到的。

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