cuando trato de adjuntar un archivo no me sale el nombre del archivo y me sale "[objeto Objeto] ¿alguien sabría como ayudarme? No logro que me aparezca ningún nombre
export class ReclamiRaccoltaComponent implements OnInit { files: any[] = [] onChange(event) { for (let file of event.target.files) { this.files.push({ name: file.name, type: file.type, size: file.size }); } } <form method="post" action="" enctype="multipart/form-data"> <input type="file" onChange="console.log(event.target.files[0].name)" #fileInput (change)="onChange($event)" name="upload1" id="upload1" class="upload" multiple="multiple" /> <label for="upload1"> <svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-upload"></use></svg> <span>Upload</span> </label> <ul class="upload-file-list" *ngFor="let file of files"> <li class="upload-file success"> <svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-file"></use></svg> <p> <span class="sr-only">File caricato:</span> {{file}} <span class="upload-file-weight">KB</span> </p> <button disabled> <span class="sr-only">Caricamento ultimato</span> <svg class="icon" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-check"></use></svg> </button> </li> </ul> </form> <button [disabled]="!form.valid" onclick="notificationShow('notificationIcnTxt', 6000)" type="submit" class="btn mb-5 btn-primary" style="width: 120px; height: 60px;">INVIA</button>Puede usar la función filereader () en angular para leer el archivo de entrada.
// This is typescript code only runs with angular // This is typescript code only runs with angular // This is typescript code only runs with angular fileName: string; fileSize: number; fileType: string; loadFile(event): void { const inputValue = event.target; const file: File = inputValue.files[0]; const myReader: FileReader = new FileReader(); myReader.readAsDataURL(file); myReader.onloadend = (e) => { console.log(e); this.fileName = file.name; this.fileSize = file.size; this.fileType = file.type myReader.result as string; // this is base64 string to upload or save in DB }; } <input type="file" id="file" class="input" (change)="loadFile($event)" /> <p>Name: {{fileName}}</p> <p>Size: {{fileSize}}</p> <p>Type: {{fileType}}</p>Obtienes objeto objeto porque el archivo es un objeto. Si desea el nombre, debe preguntar {{ file.name }} type {{ file.type }} size {{ file.size }}
<form method="post" action="" enctype="multipart/form-data"> <input type="file" onChange="console.log(event.target.files[0].name)" #fileInput (change)="onChange($event)" name="upload1" id="upload1" class="upload" multiple="multiple" /> <label for="upload1"> <svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-upload"></use></svg> <span>Upload</span> </label> <ul class="upload-file-list" *ngFor="let file of files"> <li class="upload-file success"> <svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-file"></use></svg> <p> <span class="sr-only">File caricato:</span> {{file.name}} {{file.type}} {{file.size}} <span class="upload-file-weight">KB</span> </p> <button disabled> <span class="sr-only">Caricamento ultimato</span> <svg class="icon" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-check"></use></svg> </button> </li> </ul> </form> <button [disabled]="!form.valid" onclick="notificationShow('notificationIcnTxt', 6000)" type="submit" class="btn mb-5 btn-primary" style="width: 120px; height: 60px;">INVIA</button>