Question

编辑，有关将文件为何转换为字符串的原始问题已解决。该代码已被编辑以反映这些更正。 API处理程序现在将对象作为数据类型输出，并将缓冲区作为request.payload.file的值输出。

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

当我在Aurelia应用程序中console.log（typeof（selectedImage）时，它声明对象，但是当我在处理程序中控制台log typeOf（selecetdImage）时，我得到了String。我猜这就是为什么我的函数是'并给出500条错误消息

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

编辑。我将viewmodel变量更改为 title = null; files = null;

然后我将formData追加函数更改为：

formData.append（'file'，File，files [0]）;

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

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

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

我不确定该如何处理数据。我假设它是八进制的图像二进制数据？如果是这样，有人知道如何在节点中将其写为映像吗？有效负载不再是字符串类型，现在是对象类型。

      <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数据。

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

1 个答案: