मुझे पता है कि यह एक सामान्य प्रश्न है लेकिन मैं कोणीय 2 में एक फ़ाइल अपलोड करने में विफल रहा हूँ। मैंने कोशिश की है
1) http://valor-software.com/ng2-file-upload/ और
2) http://ng2-uploader.com/home
...परंतु विफल हो गया। क्या किसी ने फाइल को एंगुलर में अपलोड किया है? आपने किस विधि का उपयोग किया? ऐसा कैसे करें? यदि कोई नमूना कोड या डेमो लिंक प्रदान किया जाता है तो यह वास्तव में सराहना की जाएगी।
जवाबों:
फ़ाइलों को अपलोड करने के लिए कोणीय 2 अच्छा समर्थन प्रदान करता है। किसी तीसरे पक्ष के पुस्तकालय की आवश्यकता नहीं है।
<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx">fileChange(event) {
let fileList: FileList = event.target.files;
if(fileList.length > 0) {
let file: File = fileList[0];
let formData:FormData = new FormData();
formData.append('uploadFile', file, file.name);
let headers = new Headers();
/** In Angular 5, including the header Content-Type can invalidate your request */
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
let options = new RequestOptions({ headers: headers });
this.http.post(`${this.apiEndPoint}`, formData, options)
.map(res => res.json())
.catch(error => Observable.throw(error))
.subscribe(
data => console.log('success'),
error => console.log(error)
)
}
}"कोणीय / कोर" का उपयोग करना: "~ 2.0.0" और @ कोणीय / http: "~ 2.0.0"
headers.append('enctype', 'multipart/form-data');('सामग्री-प्रकार' को बदलने के लिए 'enctype' का इस्तेमाल किया)। शायद यह सर्वर-साइड कोड पर निर्भर करता है। (यानी
ऊपर दिए गए उत्तरों से मैं इसे Angular 5.x के साथ बनाता हूं
uploadFile(url, file).subscribe()अपलोड अपलोड करने के लिए बस कॉल करें
import { Injectable } from '@angular/core';
import {HttpClient, HttpParams, HttpRequest, HttpEvent} from '@angular/common/http';
import {Observable} from "rxjs";
@Injectable()
export class UploadService {
constructor(private http: HttpClient) { }
// file from event.target.files[0]
uploadFile(url: string, file: File): Observable<HttpEvent<any>> {
let formData = new FormData();
formData.append('upload', file);
let params = new HttpParams();
const options = {
params: params,
reportProgress: true,
};
const req = new HttpRequest('POST', url, formData, options);
return this.http.request(req);
}
}इसे अपने घटक में इस तरह उपयोग करें
// At the drag drop area
// (drop)="onDropFile($event)"
onDropFile(event: DragEvent) {
event.preventDefault();
this.uploadFile(event.dataTransfer.files);
}
// At the drag drop area
// (dragover)="onDragOverFile($event)"
onDragOverFile(event) {
event.stopPropagation();
event.preventDefault();
}
// At the file input element
// (change)="selectFile($event)"
selectFile(event) {
this.uploadFile(event.target.files);
}
uploadFile(files: FileList) {
if (files.length == 0) {
console.log("No file selected!");
return
}
let file: File = files[0];
this.upload.uploadFile(this.appCfg.baseUrl + "/api/flash/upload", file)
.subscribe(
event => {
if (event.type == HttpEventType.UploadProgress) {
const percentDone = Math.round(100 * event.loaded / event.total);
console.log(`File is ${percentDone}% loaded.`);
} else if (event instanceof HttpResponse) {
console.log('File is completely loaded!');
}
},
(err) => {
console.log("Upload Error:", err);
}, () => {
console.log("Upload done");
}
)
}let params = new HttpParams(); let headers = new HttpHeaders({ 'Authorization': 'Bearer ' + localStorage.getItem('accessToken'), }); const options = { headers: headers, params: params, reportProgress: true, };
Observableऔर HttpEventपूरी तरह से छोड़ा जा सकता है यदि आप फ़ंक्शन के रिटर्न प्रकार को प्रदान करने के लिए टाइप इनफेशन का उपयोग करके ठीक हैं uploadFile()! this.http.request()पहले से ही एक प्रकार का रिटर्न देता है Observable<HttpEvent<{}>>, इसलिए यदि आप रिक्वेस्ट को एक जेनेरिक प्रकार कहते हैं (यानी this.http.request<any>()तब पूरा फ़ंक्शन सही प्रकार से काम करता है।
input type="file" (change)="addFiles($event)" style="display: none" #file multiple> <button mat-raised-button color="primary" (click)="selectFile($event)">Upload File </button>
@Eswar को धन्यवाद। इस कोड ने मेरे लिए पूरी तरह से काम किया। मैं समाधान के लिए कुछ चीजें जोड़ना चाहता हूं:
मुझे त्रुटि हो रही थी: java.io.IOException: RESTEASY007550: Unable to get boundary for multipart
इस त्रुटि को हल करने के लिए, आपको "सामग्री-प्रकार" "मल्टीपार्ट / फॉर्म-डेटा" को हटा देना चाहिए। इसने मेरी समस्या हल कर दी।
multipart/form-data; boundary=---------------------------186035562730765173675680113। इसके अलावा stackoverflow.com/a/29697774/1475331 और github.com/angular/angular/issues/11/19 देखें ।
java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found"जो आपके समान है, हालांकि जब मैं Content-Typeहेडर निकालता हूं तो मुझे इसके बजाय बैकएंड से 404 मिलता है। हम स्प्रिंग और कोणीय 2 का उपयोग कर रहे हैं। किसी भी मदद की सराहना की।
चूंकि कोड का नमूना थोड़ा पुराना है, इसलिए मैंने सोचा कि मैं एक और हालिया दृष्टिकोण साझा करूंगा, जो कि कोणीय 4.3 और नए (एर) HttpClient API, @ कोणीय / सामान्य / http का उपयोग करके साझा किया जाएगा
export class FileUpload {
@ViewChild('selectedFile') selectedFileEl;
uploadFile() {
let params = new HttpParams();
let formData = new FormData();
formData.append('upload', this.selectedFileEl.nativeElement.files[0])
const options = {
headers: new HttpHeaders().set('Authorization', this.loopBackAuth.accessTokenId),
params: params,
reportProgress: true,
withCredentials: true,
}
this.http.post('http://localhost:3000/api/FileUploads/fileupload', formData, options)
.subscribe(
data => {
console.log("Subscribe data", data);
},
(err: HttpErrorResponse) => {
console.log(err.message, JSON.parse(err.error).error.message);
}
)
.add(() => this.uploadBtn.nativeElement.disabled = false);//teardown
}
कोणीय 2+ में, सामग्री-प्रकार को खाली छोड़ना बहुत महत्वपूर्ण है । यदि आप 'सामग्री-प्रकार' को 'मल्टीपार्ट / फॉर्म-डेटा' पर सेट करते हैं तो अपलोड काम नहीं करेगा!
upload.component.html
<input type="file" (change)="fileChange($event)" name="file" />
upload.component.ts
export class UploadComponent implements OnInit {
constructor(public http: Http) {}
fileChange(event): void {
const fileList: FileList = event.target.files;
if (fileList.length > 0) {
const file = fileList[0];
const formData = new FormData();
formData.append('file', file, file.name);
const headers = new Headers();
// It is very important to leave the Content-Type empty
// do not use headers.append('Content-Type', 'multipart/form-data');
headers.append('Authorization', 'Bearer ' + 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9....');
const options = new RequestOptions({headers: headers});
this.http.post('https://api.mysite.com/uploadfile', formData, options)
.map(res => res.json())
.catch(error => Observable.throw(error))
.subscribe(
data => console.log('success'),
error => console.log(error)
);
}
}
}
मैंने सफलता के साथ प्राइमिंग से निम्नलिखित टूल का उपयोग किया है। प्राइमग के साथ खेल में मेरी कोई त्वचा नहीं है, बस अपने सुझाव पर गुजर रहा हूं।
इस सरल समाधान ने मेरे लिए काम किया: file-upload.component.html
<div>
<input type="file" #fileInput placeholder="Upload file..." />
<button type="button" (click)="upload()">Upload</button>
</div>
और फिर XMLHttpRequest के साथ सीधे घटक में अपलोड करें ।
import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
@ViewChild('fileInput') fileInput;
constructor() { }
ngOnInit() {
}
private upload() {
const fileBrowser = this.fileInput.nativeElement;
if (fileBrowser.files && fileBrowser.files[0]) {
const formData = new FormData();
formData.append('files', fileBrowser.files[0]);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/Data/UploadFiles', true);
xhr.onload = function () {
if (this['status'] === 200) {
const responseText = this['responseText'];
const files = JSON.parse(responseText);
//todo: emit event
} else {
//todo: error handling
}
};
xhr.send(formData);
}
}
}
यदि आप डॉटनेट कोर का उपयोग कर रहे हैं, तो पैरामीटर नाम फ़ील्ड नाम से मेल खाना चाहिए। इस मामले में फाइलें:
[HttpPost("[action]")]
public async Task<IList<FileDto>> UploadFiles(List<IFormFile> files)
{
return await _binaryService.UploadFilesAsync(files);
}
यह उत्तर http://blog.teamtreehouse.com/uploading-files-ajax का एक विवरण है
संपादित करें : अपलोड करने के बाद, आपको फ़ाइल-अपलोड को खाली करना होगा ताकि उपयोगकर्ता एक नई फ़ाइल का चयन कर सके। और XMLHttpRequest का उपयोग करने के बजाय, शायद भ्रूण का उपयोग करना बेहतर है:
private addFileInput() {
const fileInputParentNative = this.fileInputParent.nativeElement;
const oldFileInput = fileInputParentNative.querySelector('input');
const newFileInput = document.createElement('input');
newFileInput.type = 'file';
newFileInput.multiple = true;
newFileInput.name = 'fileInput';
const uploadfiles = this.uploadFiles.bind(this);
newFileInput.onchange = uploadfiles;
oldFileInput.parentNode.replaceChild(newFileInput, oldFileInput);
}
private uploadFiles() {
this.onUploadStarted.emit();
const fileInputParentNative = this.fileInputParent.nativeElement;
const fileInput = fileInputParentNative.querySelector('input');
if (fileInput.files && fileInput.files.length > 0) {
const formData = new FormData();
for (let i = 0; i < fileInput.files.length; i++) {
formData.append('files', fileInput.files[i]);
}
const onUploaded = this.onUploaded;
const onError = this.onError;
const addFileInput = this.addFileInput.bind(this);
fetch('/api/Data/UploadFiles', {
credentials: 'include',
method: 'POST',
body: formData,
}).then((response: any) => {
if (response.status !== 200) {
const error = `An error occured. Status: ${response.status}`;
throw new Error(error);
}
return response.json();
}).then(files => {
onUploaded.emit(files);
addFileInput();
}).catch((error) => {
onError.emit(error);
});
}
यह उपयोगी ट्यूटोरियल है , एनसी 2-फाइल-अपलोड और एनजी 2-फाइल-अपलोड का उपयोग करके फ़ाइल कैसे अपलोड करें।
मेरे लिए यह बहुत मदद करता है।
फिलहाल, ट्यूटोरियल में कुछ गलतियाँ हैं:
1- क्लाइंट के पास सर्वर के रूप में समान अपलोड यूआरएल होनी चाहिए, इसलिए app.component.tsपरिवर्तन लाइन में
const URL = 'http://localhost:8000/api/upload';
सेवा
const URL = 'http://localhost:3000';
2- सर्वर 'टेक्स्ट / html' के रूप में प्रतिक्रिया भेजता है, इसलिए app.component.tsपरिवर्तन में
.post(URL, formData).map((res:Response) => res.json()).subscribe(
//map the success function and alert the response
(success) => {
alert(success._body);
},
(error) => alert(error))
सेवा
.post(URL, formData)
.subscribe((success) => alert('success'), (error) => alert(error));
फ़ॉर्म फ़ील्ड के साथ छवि अपलोड करने के लिए
SaveFileWithData(article: ArticleModel,picture:File): Observable<ArticleModel>
{
let headers = new Headers();
// headers.append('Content-Type', 'multipart/form-data');
// headers.append('Accept', 'application/json');
let requestoptions = new RequestOptions({
method: RequestMethod.Post,
headers:headers
});
let formData: FormData = new FormData();
if (picture != null || picture != undefined) {
formData.append('files', picture, picture.name);
}
formData.append("article",JSON.stringify(article));
return this.http.post("url",formData,requestoptions)
.map((response: Response) => response.json() as ArticleModel);
}
मेरे मामले में मुझे C # में .NET Web Api की आवश्यकता थी
// POST: api/Articles
[ResponseType(typeof(Article))]
public async Task<IHttpActionResult> PostArticle()
{
Article article = null;
try
{
HttpPostedFile postedFile = null;
var httpRequest = HttpContext.Current.Request;
if (httpRequest.Files.Count == 1)
{
postedFile = httpRequest.Files[0];
var filePath = HttpContext.Current.Server.MapPath("~/" + postedFile.FileName);
postedFile.SaveAs(filePath);
}
var json = httpRequest.Form["article"];
article = JsonConvert.DeserializeObject <Article>(json);
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
article.CreatedDate = DateTime.Now;
article.CreatedBy = "Abbas";
db.articles.Add(article);
await db.SaveChangesAsync();
}
catch (Exception ex)
{
int a = 0;
}
return CreatedAtRoute("DefaultApi", new { id = article.Id }, article);
}
आज मैं एनजी 2-फाइल-अपलोड पैकेज को अपने कोणीय 6 एप्लिकेशन में एकीकृत कर रहा था , यह बहुत आसान था, कृपया नीचे उच्च-स्तरीय कोड ढूंढें।
एनजी 2-फाइल-अपलोड मॉड्यूल आयात करें
app.module.ts
import { FileUploadModule } from 'ng2-file-upload';
------
------
imports: [ FileUploadModule ],
------
------
घटक ts फ़ाइल आयात FileUploader
app.component.ts
import { FileUploader, FileLikeObject } from 'ng2-file-upload';
------
------
const URL = 'http://localhost:3000/fileupload/';
------
------
public uploader: FileUploader = new FileUploader({
url: URL,
disableMultipart : false,
autoUpload: true,
method: 'post',
itemAlias: 'attachment'
});
public onFileSelected(event: EventEmitter<File[]>) {
const file: File = event[0];
console.log(file);
}
------
------
घटक HTML फ़ाइल टैग जोड़ें
app.component.html
<input type="file" #fileInput ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)" />
वर्किंग ऑनलाइन स्टैकब्लिट्ज़ लिंक: https://ng2-file-upload-example.stackblitz.io
Stackblitz कोड उदाहरण: https://stackblitz.com/edit/ng2-file-upload-example
आधिकारिक दस्तावेज लिंक https://valor-software.com/ng2-file-upload/
सरलतम रूप में, निम्नलिखित कोड कोणीय 6/7 में काम करता है
this.http.post("http://destinationurl.com/endpoint", fileFormData)
.subscribe(response => {
//handle response
}, err => {
//handle error
});
यहाँ पूरा कार्यान्वयन है
jspdf और कोणीय 8
मैं एक पीडीएफ जेनरेट करता हूं और POST रिक्वेस्ट के साथ pdf अपलोड करना चाहता हूं, यह है कि मैं क्या करता हूं (स्पष्टता के लिए, मैं कुछ कोड और सर्विस लेयर को हटा देता हूं)
import * as jsPDF from 'jspdf';
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient)
upload() {
const pdf = new jsPDF()
const blob = pdf.output('blob')
const formData = new FormData()
formData.append('file', blob)
this.http.post('http://your-hostname/api/upload', formData).subscribe()
}
मैंने संदर्भ का उपयोग करके फ़ाइल अपलोड की है। इस तरह फ़ाइल अपलोड करने के लिए किसी पैकेज की आवश्यकता नहीं है।
// कोड को .ts फ़ाइल में लिखा जाना है
@ViewChild("fileInput") fileInput;
addFile(): void {
let fi = this.fileInput.nativeElement;
if (fi.files && fi.files[0]) {
let fileToUpload = fi.files[0];
this.admin.addQuestionApi(fileToUpload)
.subscribe(
success => {
this.loading = false;
this.flashMessagesService.show('Uploaded successfully', {
classes: ['alert', 'alert-success'],
timeout: 1000,
});
},
error => {
this.loading = false;
if(error.statusCode==401) this.router.navigate(['']);
else
this.flashMessagesService.show(error.message, {
classes: ['alert', 'alert-danger'],
timeout: 1000,
});
});
}
}
// कोड को service.ts फ़ाइल में लिखा जाना चाहिए
addQuestionApi(fileToUpload: any){
var headers = this.getHeadersForMultipart();
let input = new FormData();
input.append("file", fileToUpload);
return this.http.post(this.baseUrl+'addQuestions', input, {headers:headers})
.map(response => response.json())
.catch(this.errorHandler);
}
// कोड को html में लिखा जाना है
<input type="file" #fileInput>