Изменить, оригинальный вопрос был решен, почему файл был преобразован в строку.Код был отредактирован для отражения этих исправлений.Обработчик API теперь выводит объект как тип данных и буфер как значение request.payload.file.
Я использую Aurelia для создания одностраничного приложения.Существует HTML-форма, которая принимает два поля ввода, одно для файла, другое для текста.Эти поля связаны с переменными (selecetdImage и title) в связанной модели представления TypeScript.В viewmodel они используются в качестве аргументов в функции, которая добавляет их в formData и отправляет HTTP-запрос post с formData обработчику API-интерфейса Hapi инфраструктуры Node / js.
Когда я console.log (typeof (selectedImage) в приложении Aurelia, он заявляет об объекте, но когда я консоль журнала logOf (selecetdImage) в обработчике, я получаю String. Я думаю, именно поэтому мойфункция не работает и выдает 500 сообщений об ошибках
Сам обработчик работает. Я использовал его в веб-приложении на основе сервера MVC. В этом контексте форма HTML запускает пост-запрос, а обработчик MVC успешно получаетфайл, записывает его в local / temp.img и загружает его в cloudinary. Но с версией API, в которой я сам собирал данные формы, как указано выше, файл не записывается в local / temp.img и происходит сбой при загрузке cloudinary.
Edit. Я изменил переменные 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;
}
},