为什么我的图像文件被转换为字符串？

Question

编辑，原问题已解决，为什么文件被转换为字符串。代码已被编辑以反映这些更正。 API 处理程序现在输出 object 作为数据类型和缓冲区作为 request.payload.file.

的值

我正在使用 Aurelia 制作单页应用程序。有一个 HTML 表单接受两个输入字段，一个用于文件，一个用于文本。这些字段绑定到关联的 TypeScript 视图模型中的变量（selectdImage 和 title）。在视图模型中，它们被用作函数中的参数，该函数将它们附加到 formData 并将带有 formData 的 http post 请求发送到 Node/js Hapi 框架 API 处理程序。

当我在 Aurelia 应用程序中 console.log(typeof(selectedImage) 时，它显示 object，但是当我在处理程序中控制日志 typeOf(selecetdImage) 时，我得到了字符串。我是猜测这就是为什么我的功能无法正常工作并给出 500 条错误消息

处理程序本身可以工作。我在基于 MVC 服务器的 Web 应用程序中使用了它。在这种情况下，HTML 表单触发 post 请求，MVC 处理程序成功接收文件，将其写入 local/temp.img 并将其上传到 cloudinary。但是对于 API 版本，我如上所述自己组装了表单数据，文件没有写入 local/temp.img 并且云上传失败。

编辑。我将视图模型变量更改为标题=空；文件=空；

并且我将 formData 附加函数更改为：

formData.append('file', 文件, 文件[0]);

按照此处的示例。下面的代码现已修改以匹配此更新。

现在，当我在 API 处理程序中控制台记录文件的值时，输出是：

    <Buffer ff d8 ff e0 00 10.......

我不确定如何处理这些数据。我假设它是八进制的图像二进制数据？如果是这样，有谁知道如何将它写成节点中的图像？负载不再是字符串类型，现在是 object.

类型

      <form submit.delegate="uploadPhoto()" enctype="multipart/form-data">
        <div class="two fields">
          <div class="field">
            <label>File</label>
            <input type="file" name="file" accept="image/png, image/jpeg" files.bind="files">
          </div>
          <div class="field">
            <label>Title</label> <input value.bind="title">
          </div>
        </div>
        <button type="submit"> Upload </button>
      </form>


    //photoUpload.ts// (view model associated with above html

    @inject(POIService)
    export class PhotoForm {

      @bindable
      photos: Photo[];
      title = null;
      files = null;

      constructor (private poi: POIService) {}
      uploadPhoto() {
        const result = this.poi.uploadPhoto(this.title, this.files);
        console.log(this.title);
        console.log(result);
      }  

    //POIService (where contains injected function to create HTTP request

    async uploadPhoto(title: string, files){
        console.log("now uploading photo for: " + this.currentLocation)
        let formData = new FormData();
        formData.append("title", title);
        formData.append("location", this.currentLocation); //don't worry about this variable, it's set by another function every time a page is viewed
        formData.append("file", files[0]);
        const response = await this.httpClient.post('/api/locations/' + this.currentLocation + '/photos', formData);
        console.log(response);
      }

    //API Handler (accepts HTTP request, writes the image to a local folder, the uploads to cloudinary and returns the url and photo_id which are stored in a Mongod document

  create: {
        auth: false,
        handler: async function(request, h) {
          const photo = request.payload.file;
          await writeFile('./public/temp.img', photo);
          const result = await cloudinary.v2.uploader.upload('./public/temp.img', function(error, result) {
            console.log(result)
          });
          const newPhoto = new Photo({
            title: request.payload.title,
            url: result.url,
            public_id: result.public_id,
            location: request.params.name
          })
          await newPhoto.save();
          return newPhoto;
        }
      },

Answer 1

是否是一个很长的字符串，前15个左右的字符包含"data:b64"？如果是这样，那就意味着它是 base64 数据。

为什么我的图像文件被转换为字符串？

Why is my image file being converted to a string?

file-upload

image

form-data

fs

node.js