1. html

<!-- 預覽的圖片 -->
<div class="file-image">
   <img src="" alt="" id='image'>
</div>

<!-- 新增圖片 -->
<div class="file-btn">
  新增圖片
  <input type="file" @change="addImage" id="file">
</div>

<!-- 上傳圖片 -->
<button> 上傳</button>

預覽圖片js

var file;

var addImage = function(){
    file = jQuery('.file')[0].files[0];
    //新增圖片路徑到img src中進行預覽
    jQuery('#iamge').attr('src',getObjectURL(file));
    //不同瀏覽器下的路徑不同
     function getObjectURL(file) {
          var url = null;
          if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
          } else
 
 if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
          } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
          }
          return url;
        }
}

利用FormData上傳圖片js

 var
 
 imgdata = new FormData();
 imgdata.append("img",file);
 //利用ajax上傳
jQuery.ajax({
        type: "PUT",
        url: url,
        data: imgdata,
        async: false,
        cache: false,
        contentType: false,
        processData: false,

        success: function (data) {
         alert("上傳成功");
        },
        error: function (jqXHR) {
          alert("上傳失敗")

        }
    })