Saya tahu ini adalah pertanyaan umum tetapi saya gagal mengunggah file dalam Angular 2. Saya sudah mencoba
1) http://valor-software.com/ng2-file-upload/ dan
2) http://ng2-uploader.com/home
... tetapi gagal. Adakah yang mengunggah file di Angular? Metode apa yang Anda gunakan? Bagaimana cara melakukannya? Jika ada kode sampel atau tautan demo yang disediakan, itu akan sangat dihargai.
angular
file-upload
angular2-http
heman123
sumber
sumber
headers.append('enctype', 'multipart/form-data');
(menggunakan 'enctype' untuk mengganti 'Content-Type'). Mungkin itu tergantung pada kode sisi server. (Yaitu api)Dari jawaban di atas saya membangun ini dengan Angular 5.x
Panggil saja
uploadFile(url, file).subscribe()
untuk memicu unggahanGunakan seperti ini di komponen Anda
sumber
let params = new HttpParams(); let headers = new HttpHeaders({ 'Authorization': 'Bearer ' + localStorage.getItem('accessToken'), }); const options = { headers: headers, params: params, reportProgress: true, };
Observable
danHttpEvent
dapat dihilangkan seluruhnya jika Anda setuju dengan menggunakan inferensi tipe untuk menyediakan tipe pengembalian fungsiuploadFile()
!this.http.request()
sudah mengembalikan jenisObservable<HttpEvent<{}>>
, jadi jika Anda memberikan permintaan memanggil jenis umum (yaituthis.http.request<any>()
maka seluruh fungsi hanya bekerja dengan jenis yang tepat.input type="file" (change)="addFiles($event)" style="display: none" #file multiple> <button mat-raised-button color="primary" (click)="selectFile($event)">Upload File </button>
Terima kasih kepada @Eswar. Kode ini berfungsi dengan baik untuk saya. Saya ingin menambahkan hal-hal tertentu ke solusinya:
Saya mendapatkan kesalahan:
java.io.IOException: RESTEASY007550: Unable to get boundary for multipart
Untuk mengatasi kesalahan ini, Anda harus menghapus "Tipe-Jenis" "multipart / formulir-data". Itu memecahkan masalah saya.
sumber
multipart/form-data; boundary=---------------------------186035562730765173675680113
. Lihat juga stackoverflow.com/a/29697774/1475331 dan github.com/angular/angular/issues/11819 .java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found"
yang mirip dengan kesalahan Anda, namun ketika saya menghapusContent-Type
header saya mendapatkan 404 dari backend. Kami menggunakan Spring dan Angular 2. Bantuan apa pun dihargai.Karena contoh kode agak ketinggalan jaman saya pikir saya akan membagikan pendekatan yang lebih baru, menggunakan Angular 4.3 dan API HttpClient (er) baru, @ angular / common / http
sumber
Dalam Angular 2+, sangat penting untuk membiarkan Konten-Jenis kosong. Jika Anda mengatur 'Jenis-Konten' ke 'multipart / formulir-data', unggahan tidak akan berfungsi!
upload.component.html
upload.component.ts
sumber
Saya telah menggunakan alat berikut dari priming dengan kesuksesan. Saya tidak memiliki skin dalam game dengan primeNg, hanya menyampaikan saran saya.
http://www.primefaces.org/primeng/#/fileupload
sumber
Solusi sederhana ini berhasil untuk saya: file-upload.component.html
Dan kemudian lakukan pengunggahan dalam komponen secara langsung dengan XMLHttpRequest .
Jika Anda menggunakan inti dotnet, nama parameter harus cocok dengan nama bidang dari. file dalam hal ini:
Jawaban ini adalah penjiplakan dari http://blog.teamtreehouse.com/uploading-files-ajax
Sunting : Setelah mengunggah, Anda harus menghapus unggahan file sehingga pengguna dapat memilih file baru. Dan daripada menggunakan XMLHttpRequest, mungkin lebih baik menggunakan fetch:
https://github.com/yonexbat/cran/blob/master/cranangularclient/src/app/file-upload/file-upload.component.ts
sumber
Ini adalah tutorial yang berguna , cara mengunggah file menggunakan ng2-file-upload dan TANPA ng2-file-upload.
Bagi saya itu sangat membantu.
Saat ini, tutorial berisi beberapa kesalahan:
1- Klien harus memiliki url unggahan yang sama dengan server, jadi di
app.component.ts
baris ubahconst URL = 'http://localhost:8000/api/upload';
untuk
const URL = 'http://localhost:3000';
2- Server mengirim respons sebagai 'teks / html', jadi dalam
app.component.ts
perubahanuntuk
sumber
Untuk mengunggah gambar dengan bidang formulir
Dalam kasus saya, saya membutuhkan .NET Web Api di C #
sumber
Hari ini saya terintegrasi ng2-file-upload ke aplikasi angular 6 saya, itu cukup sederhana, Silakan temukan kode tingkat tinggi di bawah ini.
impor modul unggah file ng2
app.module.ts
File komponen impor FileUploader
app.component.ts
HTML komponen menambahkan tag file
app.component.html
Tautan stackblitz Online yang Bekerja: https://ng2-file-upload-example.stackblitz.io
Contoh Kode Stackblitz: https://stackblitz.com/edit/ng2-file-upload-example
Tautan dokumentasi resmi https://valor-software.com/ng2-file-upload/
sumber
Cobalah untuk tidak mengatur
options
parameterthis.http.post(${this.apiEndPoint}, formData)
dan pastikan Anda tidak mengatur
globalHeaders
di pabrik Http Anda.sumber
Dalam bentuk paling sederhana, kode berikut ini berfungsi di Angular 6/7
Inilah implementasi lengkapnya
sumber
jspdf dan Angular 8
Saya menghasilkan pdf dan ingin mengunggah pdf dengan permintaan POST, inilah yang saya lakukan (Untuk lebih jelasnya, saya menghapus beberapa kode dan lapisan layanan)
sumber
Saya sudah mengunggah file menggunakan referensi. Tidak diperlukan paket untuk mengunggah file dengan cara ini.
// kode yang akan ditulis dalam file .ts
}
// kode yang akan ditulis dalam file service.ts
}
// kode ditulis dalam html
sumber