Maison > interface Web > js tutoriel > Exemple de code pour implémenter le téléchargement d'images et de fichiers dans vue

Exemple de code pour implémenter le téléchargement d'images et de fichiers dans vue

亚连
Libérer: 2018-05-29 17:38:47
original
3098 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous un exemple de code pour télécharger des images et des fichiers dans Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

page html

<input type="file" value="" id="file" @change=&#39;onUpload&#39;>//注意不能带括号
Copier après la connexion

code js

methods: {
//上传图片
onUpload(e){
      var formData = new FormData(); 
    f ormData.append(&#39;file&#39;, e.target.files[0]);
    formData.append(&#39;type&#39;, &#39;test&#39;);
      $.ajax({
        url: &#39;/ShopApi/util/upload.weixun&#39;,//这里是后台接口需要换掉
        type: &#39;POST&#39;,
        dataType: &#39;json&#39;,
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
        success: (res) => {        
          if (res.code === 200) {
            var img_tpl =&#39;<p class="picture" style="width:108px;float:left;"><img id="preview" src="&#39;+后台返回的tu&#39;pian路径+&#39;" style="width:48px;height:48px;float:left;background-size:cover;"/><span class="r-span"
 onclick = "onDeletePicture()" style="color:#49BDCC;display:block;float:left;margin-left:10px;line-height:48px;">删除</span></p>&#39;;
            $("#refund_img").after(img_tpl);
          }
        },
        error: function(err) {
        alert("网络错误");
        }
      });
} 
}
Copier après la connexion

Rendu d'images

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 :

analyse du code source de la vue Data Control View

Une brève discussion sur les composants d'ordre supérieur de React

Exemple de code pour développer un composant bouton avec vue

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