Explication détaillée des étapes pour implémenter le téléchargement d'images et de fichiers dans Vue

Cette fois, je vais vous apporter une explication détaillée des étapes de mise en œuvre des images et du téléchargement de fichiers Quelles sont les précautions pour la mise en œuvre des images et des téléchargements de fichiers dans Vue ? Voici un cas pratique. Jetons un coup d'oeil.

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 ='<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>';
            $("#refund_img").after(img_tpl);
          }
        },
        error: function(err) {
        alert("网络错误");
        }
      });
} 
}

Rendu d'images

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour des choses plus passionnantes. , veuillez faire attention à php Chinois Autres articles connexes en ligne !

Lecture recommandée :

Explication détaillée des étapes pour utiliser axios dans vue

Axios+méthode post explication détaillée de les étapes pour soumettre des données de formulaire

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!