使用Formidable的PersistentFile与FormData和fetch一起使用。

huangapple go评论99阅读模式
英文:

Use formidable's PersistentFile with FormData and fetch

问题

我正在运行一个使用Nuxt3/Nitro的小型API。它的工作方式类似于我的Web应用程序和我的常规API之间的代理。因此,我的Nitro API接收文件,我使用Formidable从请求中读取它们,并将它们保存在Formidable的PersistentFile实例中。

现在我需要将这些文件放入常规的formData.append语法中,以便我可以使用fetch API将包含这些文件的formData发送到服务器。

我该如何做到这一点?如果我只是像这样放置文件:formData.append('name', persistentFileInstance);,它会说它不被识别为文件。所以我有点不知道应该如何转换这个实例。

这是我的文件的console.log输出:

addImage.post.ts 被调用内容如下
{
  photo: [
    PersistentFile {
      _events: [Object: null prototype],
      _eventsCount: 1,
      _maxListeners: undefined,
      lastModifiedDate: 2023-01-07T22:33:43.127Z,
      filepath: '/tmp/0d0c99ee783bfe790d86da001',
      newFilename: '0d0c99ee783bfe790d86da001',
      originalFilename: 'Screenshot from 2023-01-04 09-04-32.png',
      mimetype: 'image/png',
      hashAlgorithm: false,
      size: 110657,
      _writeStream: [WriteStream],
      hash: null,
      [Symbol(kCapture)]: false
    }
  ]
}
英文:

I'm running a small api with nuxt3/nitro. It works like a proxy between my webapp and my regular api. So my nitro api receives files, I read them from the request using Formidable, and they get saved in formidable's PersistentFileinstances.

Now I need to put these files in a regular formData.append syntax, so I can use the fetch api to send a post containing these files in the formData.

How can I do this? If I just put the file like formData.append('name', persistentFileInstance); it says it isn't recognized as a file. So I'm kinda lost on how should I transform this instance.

Here's a console.log of my file:

addImage.post.ts called with this content {                                                                                                       19:33:43
  photo: [
    PersistentFile {
      _events: [Object: null prototype],
      _eventsCount: 1,
      _maxListeners: undefined,
      lastModifiedDate: 2023-01-07T22:33:43.127Z,
      filepath: '/tmp/0d0c99ee783bfe790d86da001',
      newFilename: '0d0c99ee783bfe790d86da001',
      originalFilename: 'Screenshot from 2023-01-04 09-04-32.png',
      mimetype: 'image/png',
      hashAlgorithm: false,
      size: 110657,
      _writeStream: [WriteStream],
      hash: null,
      [Symbol(kCapture)]: false
    }
  ]
}

答案1

得分: 2

我通过从本地文件路径创建缓冲区,然后创建 Blob 实例,然后将 Blob 添加到 FormData 来修复了它。这是我的代码:

import { readFiles } from 'h3-formidable';
import { Blob } from "buffer";
import fs from "fs";

//...

let buffer = fs.readFileSync(thisPhoto.filepath);
let blob = new Blob([buffer]);

var form = new FormData(); // 这是默认的 FormData 实例,而不是自定义包
form.append('photo', blob);
英文:

I fixed it by creating a buffer from the local file path, then a Blob instance, then appending the Blob to the FormData. Here's my code:

import { readFiles } from 'h3-formidable'
import { Blob } from "buffer";
import fs from "fs";

//...

  let buffer = fs.readFileSync(thisPhoto.filepath);
  let blob = new Blob([buffer]);
  
  var form = new FormData(); //this is default FormData instance, not the custom package
  form.append('photo', blob);

huangapple
  • 本文由 发表于 2023年1月8日 06:44:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/75044298.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定