Maison > interface Web > js tutoriel > 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

亚连
Libérer: 2018-05-29 17:36:32
original
2702 Les gens l'ont consulté

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"/>
Copier après la connexion

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); 
   })
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal