Winkel-Datei Hochladen

Hier ist ein funktionierendes Beispiel für Datei-upload api:

Schritt 1: HTML-Template (file-upload.component.html)

Definieren, einfache input-tag vom Typ file. Fügen Sie eine Funktion hinzu, um (change)-event-handling für die Auswahl von Dateien.

<div class="form-group">
    <label for="file">Choose File</label>
    <input type="file"
           id="file"
           (change)="handleFileInput($event.target.files)">
</div>

Schritt 2: Upload-Handling in Typoskript (Datei-upload.Komponente.ts)

Definieren Sie eine Standard-variable für die ausgewählte Datei.

fileToUpload: File = null;

Funktion erstellen, die Sie verwenden, in (change)-Ereignis in der Datei input-tag:

handleFileInput(files: FileList) {
    this.fileToUpload = files.item(0);
}

Wenn Sie zu behandeln, multifile Auswahl, als Sie Durchlaufen können diese Dateien array.

Erstellen Sie nun die Datei-upload-Funktion, durch die Sie aufrufen Datei-upload.service:

uploadFileToActivity() {
    this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
      //do something, if upload success
      }, error => {
        console.log(error);
      });
  }

Schritt 3: Datei-Upload-Dienst (Datei-upload.service.ts)

Durch das hochladen einer Datei per POST-Methode sollten Sie verwenden FormData, denn so können Sie Datei hinzufügen, um http-request.

postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = 'your-destination-url';
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.httpClient
      .post(endpoint, formData, { headers: yourHeadersConfig })
      .map(() => { return true; })
      .catch((e) => this.handleError(e));
}

So, in Diesem sehr einfachen Beispiel arbeiten, die ich täglich in meiner Arbeit.

Ich bin mit Eckigen 5.2.11,
Ich mag die Lösung von Gregor Doroschenko, jedoch habe ich gemerkt, dass die hochgeladene Datei hat null Byte, musste ich eine kleine änderung vornehmen, um es für mich zu arbeiten.

postFile(fileToUpload: File): Observable<boolean> {
  const endpoint = 'your-destination-url';
  return this.httpClient
    .post(endpoint, fileToUpload, { headers: yourHeadersConfig })
    .map(() => { return true; })
    .catch((e) => this.handleError(e));
}

Den folgenden Zeilen (formData) hat bei mir nicht funktioniert.

const formData: FormData = new FormData();
formData.append('fileKey', fileToUpload, fileToUpload.name);

https://github.com/amitrke/ngrke/blob/master/src/app/services/fileupload.service.ts

Versuchen, diese

Installieren

npm install primeng --save

Import

import {FileUploadModule} from 'primeng/primeng';

Html

<p-fileUpload name="myfile[]" url="./upload.php" multiple="multiple"
    accept="image/*" auto="auto"></p-fileUpload>

Komplette Beispiel-Datei hochladen mit Angular und nodejs(express)

HTML-Code

            <div class="form-group">
                <label for="file">Choose File</label><br/>
                <input type="file" id="file" (change)="uploadFile($event.target.files)" multiple>
            </div>

TS-Komponente Code

uploadFile(files) {
    console.log('files', files)
        var formData = new FormData();

    for(let i =0; i < files.length; i++){
      formData.append("files", files[i], files[i]['name']);
        }

    this.httpService.httpPost('/fileUpload', formData)
      .subscribe((response) => {
        console.log('response', response)
      },
        (error) => {
      console.log('error in fileupload', error)
       })
  }

Node Js code

fileUpload-API-controller

function start(req, res) {
fileUploadService.fileUpload(req, res)
    .then(fileUploadServiceResponse => {
        res.status(200).send(fileUploadServiceResponse)
    })
    .catch(error => {
        res.status(400).send(error)
    })
}

module.exports.start = start

Upload-service verwenden multer

const multer = require('multer') //import library
const moment = require('moment')
const q = require('q')
const _ = require('underscore')
const fs = require('fs')
const dir = './public'

/** Store file on local folder */
let storage = multer.diskStorage({
destination: function (req, file, cb) {
    cb(null, 'public')
},
filename: function (req, file, cb) {
    let date = moment(moment.now()).format('YYYYMMDDHHMMSS')
    cb(null, date + '_' + file.originalname.replace(/-/g, '_').replace(//g,     '_'))
}
})

/** Upload files  */
let upload = multer({ storage: storage }).array('files')

/** Exports fileUpload function */
module.exports = {
fileUpload: function (req, res) {
    let deferred = q.defer()

    /** Create dir if not exist */
    if (!fs.existsSync(dir)) {
        fs.mkdirSync(dir)
        console.log(`\n\n ${dir} dose not exist, hence created \n\n`)
    }

    upload(req, res, function (err) {
        if (req && (_.isEmpty(req.files))) {
            deferred.resolve({ status: 200, message: 'File not attached', data: [] })
        } else {
            if (err) {
                deferred.reject({ status: 400, message: 'error', data: err })
            } else {
                deferred.resolve({
                    status: 200,
                    message: 'File attached',
                    filename: _.pluck(req.files,
                        'filename'),
                    data: req.files
                })
            }
        }
    })
    return deferred.promise
}
}