Question

我目前正在尝试将图像从我的应用程序上传到Google Cloud Storage。我已经弄清楚了如何上传图像，当我调用构建为使用邮递员附带的文件进行上传的API时，一切正常。

现在我被困的地方是从App内上传文件。

第1部分：工作代码

处理上传的API（与Postman一起使用）

[...]
router.post("/", async (req, res, next) => {
  try {
    const myFile = req.file;
    const imageUrl = await uploadImage(myFile);
    res.status(200).json({
      message: "Upload was successful",
      data: imageUrl
    });
  } catch (error) {
    next(error);
  }
});
[...]

上面的代码中使用的

uploadImage函数：

const uploadImage = file =>
  new Promise((resolve, reject) => {
    const { originalname, buffer } = file;

    const removeWhitespaces = bucket.file(originalname.replace(/ /g, "_"));
    const blob = removeWhitespaces;
    blob.name += moment(Date()).format();
    console.log(blob);
    const blobStream = blob.createWriteStream({
      resumable: false
    });
    blobStream
      .on("finish", () => {
        const publicUrl = util.format(
          `https://storage.googleapis.com/${bucket.name}/${blob.name}`
        );
        resolve(publicUrl);
      })
      .on("error", () => {
        // eslint-disable-next-line prefer-promise-reject-errors
        reject(`Unable to upload image, something went wrong`);
      })
      .end(buffer);
  });

第2部分：无效的代码。

我尝试将存储在对象中的图像传递给API的处理程序。看来，无论是在上传中还是在两者之间的某个地方，我都丢失了成功上传所需的图像信息。

上传图片并将其添加到Product对象

const handleUpload = ({ target }) => {
    const fileReader = new FileReader();

    fileReader.readAsDataURL(target.files[0]);
    fileReader.onload = e => {
      setValues({ ...values, image: e.target.result });
    };
  };

发布请求以开始上传：

router.post("/", async (req, res) => {
  try {
const image = await uploadImage(req.body.image);

    const product = {
      description: req.body.description,
      image: image.data,
      tagline: req.body.tagline,
      title: req.body.title,
      responsiblePMs: req.body.assignedUsers,
      comments: req.body.comments,
      valueprop: req.body.valueprop,
      canvasTitles: req.body.canvasTitles
    };

   [... some mongoDB actions which then use Product]

上传图片功能（现在应该再次调用工作后请求）：

const uploadImage = async image => {
  const data = new URLSearchParams();
  data.append("file", image);

  return fetch(baseURL, {
    method: "POST",
    headers: { "content-type": "application/x-www-form-urlencoded" },
    body: data
  })
    .then(handleResponse)
    .catch(handleError);
};

第3部分：错误。

TypeError: Cannot destructure property `originalname` of 'undefined' or 'null'.
    at Promise (/Users/stefanjanuschke/Development/viveyo-app/client/src/utils/GCB/processImage.js:19:38)
    at new Promise (<anonymous>)
    at uploadImage (/Users/stefanjanuschke/Development/viveyo-app/client/src/utils/GCB/processImage.js:18:3)
    at router.post (/Users/stefanjanuschke/Development/viveyo-app/client/api/routes/uploads.js:24:28)
    at Layer.handle [as handle_request] (/Users/stefanjanuschke/Development/viveyo-app/client/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/stefanjanuschke/Development/viveyo-app/client/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/Users/stefanjanuschke/Development/viveyo-app/client/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/Users/stefanjanuschke/Development/viveyo-app/client/node_modules/express/lib/router/layer.js:95:5)
    at /Users/stefanjanuschke/Development/viveyo-app/client/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/Users/stefanjanuschke/Development/viveyo-app/client/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/stefanjanuschke/Development/viveyo-app/client/node_modules/express/lib/router/index.js:275:10)
    at multerMiddleware (/Users/stefanjanuschke/Development/viveyo-app/client/node_modules/multer/lib/make-middleware.js:18:41)
    at Layer.handle [as handle_request] (/Users/stefanjanuschke/Development/viveyo-app/client/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/stefanjanuschke/Development/viveyo-app/client/node_modules/express/lib/router/index.js:317:13)
    at /Users/stefanjanuschke/Development/viveyo-app/client/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/stefanjanuschke/Development/viveyo-app/client/node_modules/express/lib/router/index.js:335:12)

node-js将图像上传到Google Cloud Platform

0 个答案: