Maison  >  Article  >  interface Web  >  Exemple de téléchargement d'images via la soumission du formulaire Vue Axios

Exemple de téléchargement d'images via la soumission du formulaire Vue Axios

亚连
亚连original
2018-05-29 17:36:322686parcourir

Ci-dessous, je vais partager avec vous un exemple de soumission et de téléchargement d'images via le formulaire vue axios. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Le framework d'éléments est utilisé dans le projet, et il est ensuite nécessaire d'ajouter des données dans le projet. Les images peuvent être téléchargées ou non.

Ensuite, le problème est que le contrôle de téléchargement est activé. L'élément n'a pas d'images. La soumission ne sera pas déclenchée, mais l'interface est écrite avec le mode de réception de fichiers multiparts/form-data

Vous ne pouvez donc imiter un téléchargement de formulaire que par vous-même

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

let file = e.target.files[0];    
   let param = new FormData(); //创建form对象 
   param.append(&#39;file&#39;,file,file.name);//通过append向form对象添加数据 
   param.append(&#39;chunk&#39;,&#39;0&#39;);//添加form表单中其他数据 
   
   let config = { 
   headers:{&#39;Content-Type&#39;:&#39;multipart/form-data&#39;} 
   }; //添加请求头 
   this.axios.post(&#39;http://upload.qiniu.com/&#39;,param,config) 
   .then(response=>{ 
   console.log(response.data); 
   })

Ce qui précède est ce que j'ai compilé pour vous. j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Le code JavaScript implémente la fonction de prévisualisation du téléchargement des fichiers txt

Angular utilise la commande d'événement d'opération ng -Cliquez sur Exemple de transmission de plusieurs paramètres

Angular utilise le filtre majuscules/minuscules pour implémenter un exemple de fonction de conversion de casse des lettres

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn