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

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;>//注意不能带括号

code js

methods: {
//上传图片
onUpload(e){
      var formData = new FormData(); 
    f ormData.append('file', e.target.files[0]);
    formData.append('type', 'test');
      $.ajax({
        url: '/ShopApi/util/upload.weixun'，//这里是后台接口需要换掉
        type: 'POST',
        dataType: 'json',
        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("网络错误");
        }
      });
} 
}

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!