Detailed explanation of the steps to implement image and file upload in Vue

This time I will bring you a detailed explanation of the steps of Vue implementation of image and file upload. What are the precautions for Vue implementation of image and file upload? . The following is a practical case. Let’s take a look. one time.

html page

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

js code

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("网络错误");
        }
      });
} 
}

Picture renderings

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website !

Recommended reading:

Detailed explanation of the steps of using axios in vue

Detailed explanation of the steps of axios post method to submit formdata

The above is the detailed content of Detailed explanation of the steps to implement image and file upload in Vue. For more information, please follow other related articles on the PHP Chinese website!