介面展示：
<el-form-item  prop ="idCardFront" style="height:53px;">
  <p>個人資訊頁</p>
  <img   @click="fileClick" src="../../assets/images/uploadFile.png">//美化按鈕
  <input @change="fileChange($event)" :accept="accept" type="file" id="upload_file" multiple style="display: none"/>//上傳圖片
</el-form-item>
  <div class="upload_warp_img" v-show="fileArray.length!=0">
    <div  v-for="(item,index) of fileArray" class="upload_warp_img_div">
      <img :src="item.file.src" style="width: 116px;height: 78px">
    </div>
  </div>//圖片展示
 

js方法：

fileClick() {
  document.getElementById('upload_file').click()
},//點選圖片呼叫input中的方法

fileChange:function(el){
  if (!el.target.files[0].size) return;
  this.fileList(el.target);//獲取選擇的檔案
  el.target.value = ''
},

fileList:function (fileList) {//判斷上傳檔案的標準

  let file = fileList.files[0];//真正上傳的檔案；
  if(file.name.length > 50){
    Msg.error("圖片名應在50個字元以內");
    return;
  };
  if(file.size > 5242880){
    Msg.error("圖片大小不能超過5M");
    return;
  }
  let reader = new FileReader();
  let _this = this;
  reader.readAsDataURL(file);
  reader.onload = function () {//獲取檔案的src地址
 

    file.src = this.result;
      _this.fileArray = [];
    _this.fileArray.push({
      file
    })；
    _this.uploadFile(file,value);//呼叫後臺介面
  }
},

uploadFile:function(file,value){
  let _this = this;
    this.loading = true;
   let formData = new FormData();
   formData.append("files", file);
  axios.defaults.timeout = 50000;//防止圖片過大，請求超時，傳不上去
  axios.post(debug.servers+'/api/file', formData)
    .then(function (response) {
      if(response.data == undefined){
        Msg.error("網路延遲，請重新上傳");
        return;
      }

      if(response.data.code == '200'){
        _this.loading = false;
         _this.singleData.idCardFront = response.data.data.fileId;
      }
      else{
        Msg.error('上傳失敗')
        _this.loading = false;
      }
    }).catch(function (error) {
      _this.loading = false;
      console.log(error);
    });


}