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

Question

尝试在云端使用 Express/Node 进行文件上传工作，但没有成功。我能够发布请求，我的文件被上传到云端服务器，但从未得到响应，导致我的请求超时。我正在使用 [express-file-upload][1] 将数据作为比特流和 axios 发送到 cloudinary 以发布它。

我的 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。谁能指导我什么我做错了吗？

Answer 1

这里有几件事需要纠正。

A) 不需要创建这个

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

B) 在您的 imgSrc 状态下，您已经拥有数据 url。只需将其作为 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 处理图像上传的最佳方式，我建议您阅读更多有关它的信息，看看其他人是如何做到的。

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