0
284
VistasCómo cargar varios archivos con información adicional dentro del objeto
Estoy tratando de cargar varios archivos usando FormData como una matriz de objetos que contienen archivos y otras propiedades necesarias, pero no obtengo los resultados esperados.
import api from './api'; const formData = new FormData(); // File input with multiple attribute const files = this.$refs.photo.files; if (files.length > 0) { for (let i = 0; i < files.length; i++) { formData.append('files', { file: files[i], someOtherProp: 'value' }); } } api.createArticle(formData); // api/index.js import axios from 'axios'; import config from '@/config'; const api = axios.create({ baseURL: config.api, timeout: config.apiTimeout, }); createArticle(payload) { return api.post('/articles', payload, { headers: { 'Content-Type': 'multipart/form-data', } }); } export { createArticle };Cuando envío una solicitud, esto es lo que obtengo
1 Respuestas
Responde la pregunta0
La documentación de la función de agregar FormData muestra que acepta dos o tres parámetros (el tercero es opcional).
Del segundo parámetro - value - dice:
El valor del campo. Puede ser un USVString o Blob (incluidas subclases como File). Si no se especifica ninguno de estos, el valor se convierte en una cadena.
Su código intenta pasar un objeto para este parámetro, en lugar de una cadena o Blob. Por lo tanto, FormData está haciendo exactamente lo que dice la documentación que hará en esa situación y convierte ese objeto en una cadena. [Object object] es lo que JavaScript siempre genera de forma predeterminada si intenta convertir un objeto directamente en cadenas.
Si desea agregar un nombre para el archivo específicamente, como puede ver en la documentación, el nombre de filename del tercer parámetro opcional se proporciona específicamente para ese propósito.
Sin embargo, si desea pasar alguna otra propiedad relacionada, deberá hacerlo en un campo separado en FormData.
Además, no debe agregar elementos de datos con el mismo nombre repetidamente; es posible que su servidor solo vea el último. Para que funcione de la manera más confiable, debe usar la sintaxis de matriz, por ejemplo formData.append("files[]"... , entonces el servidor debería ver una matriz de datos con ese nombre, en lugar de un solo elemento. Podría hacer lo mismo para estas propiedades adicionales que desea pasar, luego también puede pasar varios elementos y su número de índice coincidirá con el número de índice del archivo con el que están relacionados, cuando su servidor reciba los datos POST.
Por ejemplo, algo como esto debería funcionar mejor:
for (let i = 0; i < files.length; i++) { formData.append('files[]', files[i]); formData.append('someOtherProp[]', 'value'); }