vue内部上传图片函数

upload() { //上传图片
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          target:".el-form-item__content",
          spinner: 'el-icon-loading',
          background: 'rgba(250, 250, 250, 0.7)'
        });
        this.picnum = this.picnum + 1;
        var self = this;
        var value = this.$refs['inputImg'].value;
        if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(value)) {
          _.message('error','图片格式错误');
          loading.close();
          return false;
        } 
        var fileList  = document.getElementById('inputImg').files;
        if (fileList.length >= 2) {
          _.message('error','请只上传一张图片');
          loading.close();
          return false;
        }
        var input = document.getElementById('inputImg');
        var max_size = 200;// 200k
        var filesize = input.files[0].size;
        //压缩文件大小不能大于200kb
        if (filesize > max_size * 1024) {
            _.message('error','上传图片过大');
            loading.close();
            return false;
        }
        var formData = new FormData(document.getElementById('uploadFormMulti'));
        this.$http.post(_.ipValue('file')+'/img/uploadifySave.html',formData, {
        // this.$http.post("//192.168.10.104:8080"+'/img/uploadifySave.html',formData, {
          method: 'post',
          dataType: 'JSON',  
          timeout: 0,
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          transformRequest: [function (data) {
              return data
          }],
          onUploadProgress: function(e) {
            let percentage = Math.round((e.loaded * 100) / e.total) || 0
          }
        }).then((response) => {
          loading.close();
          if (response.data.code == '200') {
            _.message('success','上传成功');
            this.picnum = this.picnum + 1;
            document.getElementById('uploadFormMulti')[0].value ='';
            this.ruleFormProf.markPic = response.data.data.pic;
            this.ruleFormProf.markPicNew = response.data.data.httpUrl + response.data.data.pic;
          } else if (res.code == '403') {
            this.$store.state.userInfo = null;
            this.$router.push('/orgLogin');
          } else {
            _.message('error','上传失败');
          }
        }).catch(function (error) {
          alert("0");
        })
      },

跟代码

<el-form-item  label="上传救援队标志： " prop="markPicNew"  style="padding-top:20px;" >

                <div class='upload-box ' >

                  <div v-if="!ruleFormProf.markPic" class="pic-item-div">
                    <div class='btn-uploadPic'  @click=" subminUpload()">+</div>
                    <form action="" class='pic-item-div' method="post" enctype="multipart/form-data" id="uploadFormMulti" >
                      <input type="file" name='file' id='inputImg' ref='inputImg' multiple
                        accept="image/jpg,image/jpeg,image/png,image/gif"
                        @change="upload('uploadFormMulti')">
                    </form>
                  </div>
                  <p class="tips"> 点击上传队伍标志（图片小于200kb）</p>
                
                </div>
                <div  v-if="ruleFormProf.markPic">
                  <form action="" class='pic-item-div' method="post" enctype="multipart/form-data" id="uploadFormMulti" >
                      <span style="display:inline-block;height:140px;overflow:hidden;width:340px;">
                        <img v-if="ruleFormProf.markPic" :src="ruleFormProf.markPicNew" :alt="ruleFormProf.markPicNew" style="height:140px;width:auto;" @click=" subminUpload()">
                      </span>
                      <input type="file" name='file' id='inputImg' ref='inputImg' multiple
                            accept="image/jpg,image/jpeg,image/png,image/gif"
                            @change="upload('uploadFormMulti')">
                  </form>
                </div>
                    
               <span v-show="false">{{picnum}}</span>
              </el-form-item>