最基础的前台上传图片

界面展示：
<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);
    });


}