web-dev-qa-db-fra.com

Comment soumettre des données de publication avec le téléchargement de fichier ng2 dans Angular 2?

J'utilise ng2-file-upload in angular 2. Existe-t-il un moyen de soumettre les données de mon formulaire avec une action de téléchargement de fichier?

angularng-file-upload
9
Ghanshyam

C'est NE PAS une réponse, mais Je rencontre le même problème avec ng2-file-upload . Ils ont un crochet appelé onBeforeUploadItem. J'ai essayé le suivant.

ngOnInit() {
 this.uploader.onBeforeUploadItem = (fileItem: any) => {
  fileItem.formData.Push( { someField: this.someValue } );
  fileItem.formData.Push( { someField2: this.someValue2 } );
 };
}

Lorsque je me déconnecte du contenu de fileItem.formData, toutes les valeurs sont présentes. Cependant, ces éléments de formulaire ne semblent jamais revenir au serveur. J'utilise Chrome et quand j'observe la publication HTTP, je vois ce qui suit.

En-têtes de demande

 POST/api/upload/csv HTTP/1.1 
 Hôte: localhost: 8080 
 Connexion: persistant 
 Longueur du contenu: 228 
 Origine: http: // localhost: 4200. . __ x-accès-token: eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJyb290IiwiYWRkciI6IjA6MDowOjA6MDowOjA6MSIsInNjaGVtZSI6Imh0dHAiLCJwb3J0IjoiODA4MCIsImlhdCI6MTQ2OTUwMzM1NX0.jICVQdZD-6m705sZsaQJ5-51LztdIx9pAAKgVYgL3HRMMgrJh6ldFbYvUVtA_UQkSrvCrNJeWeo4C7QYe2W4Cw .__ User-Agent. Mozilla/5.0 (Macintosh, Intel Mac OS X 10_11_5) AppleWebKit/537,36 (KHTML, comme Gecko) Chrome/52.0.2743.82 Safari/537.36 
 Content-Type: multipart/form-data; frontière = ---- WebKitFormBoundaryCSUTihSBrgmwjxg1 
 Accepter: */* 
 Référent: http: // localhost: 4200/main 
 Accept-Encodage: gzip, deflate 
 Accept-Language: en-US en; q = 0,8 
 Cookie: _ga = GA1.1.941072201.1467616449; jeton = eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJyb290IiwiYWRkciI6IjA6MDowOjA6MDowOjA6MSIsInNjaGVtZSI6Imh0dHAiLCJwb3J0IjoiODA4MCIsImlhdCI6MTQ2OTUwMzM1NX0.jICVQdZD-6m705sZsaQJ5-51LztdIx9pAAKgVYgL3HRMMgrJh6ldFbYvUVtA_UQkSrvCrNJeWeo4C7QYe2W4Cw

Charge utile de la demande

------ WebKitFormBoundaryCSUTihSBrgmwjxg1 
 Content-Disposition: form-data; nom = "fichier"; filename = "data.csv" 
 Content-Type: text/csv 


------ WebKitFormBoundaryCSUTihSBrgmwjxg1 --

Avez-vous une idée de ce qui passe? Lorsque je télécharge un fichier, je dois envoyer des valeurs de formulaire supplémentaires avec ce fichier.

J'étais assez proche. La solution consistait à remplacer onBuildItemForm.

ngOnInit() {
 this.uploader.onBuildItemForm = (fileItem: any, form: any) => {
  form.append('someField', this.someValue); //note comma separating key and value
  form.append('someField2', this.someValue2);
 };
}

L'instance form est de type FormData . En regardant ma publication HTTP, je peux voir que les valeurs de mon champ de formulaire sont envoyées au serveur et que mon serveur les voit maintenant. J'espère que ça vous aide.

20
Jane Wayne
this.uploader.onBeforeUploadItem = (item: FileItem) => {
  item.withCredentials = false;
  this.uploader.authToken = 'Bearer ' + this.boxTokenResponse.userToken;
  this.uploader.options.additionalParameter = {
    name: item.file.name,
    parent_id: this.parentFolderId
  };
};

C'est ainsi que file-uploader.class.js analyse les données du formulaire.

if (!this.options.disableMultipart) {
        sendable = new FormData();
        this._onBuildItemForm(item, sendable);
        sendable.append(item.alias, item._file, item.file.name);
        if (this.options.additionalParameter !== undefined) {
            Object.keys(this.options.additionalParameter).forEach(function (key) {
                sendable.append(key, _this.options.additionalParameter[key]);
            });
        }
    }
2
Sudherson Vetrichelvan

Pour ce qui est d’accéder aux données du serveur, cela peut être fait en utilisant Multer:

    const multer = require('multer');
    let DIR = './uploads/';

    let upload = multer({dest: DIR}).single('givenitemAlias');
        router.post('/upload', function (req, res, next) {
            console.log(req.body);//empty object
            upload(req, res, function (err) {
                if (err) {
                    // An error occurred when uploading
                    return res.status(422).send("an Error occured")
                }
                // No error occured.
                console.log(req.body);//modified req.body with out key value pairs
                console.log(req.file);//metadata of the file
                return res.send("Upload Completed for "+temppathOfUploadedFile);
            });            
        });
0
dasfdsa