web-dev-qa-db-fra.com

Puis-je définir le nom de fichier dans les données blob lorsque je télécharge des données sur le serveur à l'aide de HTML 5?

J'utilise event.clipboardData pour obtenir une image du presse-papiers, puis le télécharge sur le serveur, code:

var items = e.clipboardData.items;
for(var i=0;i<items.length;i++)
{
    if(items[i].type.indexOf("image")!=-1)
    {
        var blob=items[i].getAsFile();
        var data = new FormData();
        data.append("ImageFileField",blob);
        _post2("url...",data);
    }
}

REMARQUE: _post2() est une fonction utilisant XMLHttpRequest pour effectuer des travaux de téléchargement.

Au-dessus du code fonctionne très bien, l'image du presse-papiers peut télécharger directement sur mon serveur.

MAIS j'ai trouvé un problème, le nom de fichier de téléchargement d'image sur le serveur est fixé comme "blob", puis-je modifier le nom de fichier avant de le télécharger sur le serveur?

Voici le détail des données de téléchargement:

Demande de charge utile

------ WebKitFormBoundaryW0NQVOkdrfkYGWV3
Contenu-Disposition: données de formulaire; name = "%% File.48257279001171c9.2c36671da7f1b6c9482575de002e1f14. $ Body.0.3D8"; filename = "blob"

Type de contenu: image/png

------ WebKitFormBoundaryW0NQVOkdrfkYGWV3--

javascripthtml5xmlhttprequest
22
user3135560

Selon FormData , vous devriez pouvoir ajouter un paramètre de nom de fichier à votre appel data.append() comme suit:

data.append("ImageFileField", blob, "imageFilename.png");
36
cookch10msu

si vous voulez modifier le nom du fichier dans le blob lui-même, ajoutez simplement une clé appelée "nom"

blob.name = "imageFilename.png"

Après cela, vos fonctions JS devraient pouvoir le détecter. J'utilise jQuery File Upload et cela fonctionne avec. 

5
lsu_guy

j'ai rencontré le même problème que lors du téléchargement, le nom du fichier n'est pas un attribut multipart avec un objet blob mais après beaucoup de google et RND. Je trouve simple et la meilleure approche pour ce problème.

 let file = event.target.files[0];
 this.fileName = file.name;   // Like : abc.jpeg

 this.croppedImage = file  //blob object after cropping
 const formData = new FormData();
 formData.append('file',this.croppedImageSend,this.fileName);
 this.http.post(url, formData, headersOptions)
0
nagender pratap chauhan