Tengo un formulario con múltiples entradas, una de tipo = "archivo". Donde quiero poder cargar una imagen y luego publicar el formulario en la API para que se almacene en la base de datos.
<input name="image" class="w-full border-2 border-gray-200 rounded-3xl px-4 py-4" type="file" placeholder="Event Image" />Sin embargo, cuando ingreso todos los valores del formulario (incluida la carga de archivos y la imagen), aparece este error:
"error TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'."Estoy insertando los valores en formdata que luego se publican en la API
... methods: { async onSubmit(values) { console.log("button submitted") try { var formdata = new FormData(); formdata.append("name", values.eventname); formdata.append("description", values.eventdescription); formdata.append("image", values.image, "Image"); ...¿Cómo puedo convertir el tipo de archivo a blob para poder cargarlo? Gracias
Debe tomar los valores. imagen, consola. registrar la respuesta para ver cómo se estructuran los datos. Debe haber un valor de cadena allí que es posible que deba dividir en . para que pueda tomar el tipo MIME del archivo que ha cargado, ya que lo necesita para crear el blob.
La estructura de un Blob es así.
new Blob(blobParts, options); /** * blobParts is an array of Blob/BufferSource/String values. * options: option object: * type - Blob type, usually MIME-type eg image/png * endings - whether to transform end-of-line to make the Blob corrospond to current OS newlines. */ También debería poder convertir esto en un blob llamando a la función .blob() en el archivo que se cargó.
Un maniquí es así:
// your file name in the second param should be constructed of the string that you have logged and split earlier. var fileToUpload = new File([Blob], 'some_file_name.jpg', { type: "image/jpg", // this should be from your string split of the filename to check the file upload type. lastModified: new Date(), }); form.append("image", fileToUpload);Por la experiencia que he adquirido en el tema, te puedo decir que para poder crear un FormData, el segundo parámetro necesariamente debe ser convertido a un archivo Blob. Tu código no me queda muy claro para ser honesto, pero si quieres aprender más sobre el tema, te paso la sección sobre FormData de la guía oficial de Javascript:
https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects