vue图片上传

之前花了两个月用vue做了一个建筑照片我的webApp,前端就我一人，负责用vue写页面对接接口，后台一个程序员负责写接口，嵌套个安卓ios的壳。搞的是风风火火，过程也是很心累，大多不在技术，在于所谓的产品乱改需求，其实产品也不是产品，只是一个资历尚浅的副总。看不得我们工作清闲一点，于是非得找个活。干了两个多月，中途流程走不通，各种改改改，好不容易上线了，运营两周之后就没下文了，放弃了，也是情理之中，至始至终没有人看好过这个东西，包括我们两个开发者。

不吐槽，不吐槽，过程中有个上传身份证，企业执照的功能，也就是上传图片，记录一下，以后说不定有用。

html:

<template>
  <div class="personPic">
    <myHeader :hTitle="hTitle" ref="myHeader" :noMore="noMore"></myHeader>
    <div class="inner">
      <div class="upload">
        <div class="txt">
          <p>点击上传</p>
          <span>营业执照</span>
        </div>
        <img :src="front_pic" v-show="front_pic!=''">
        <input type="file" @change="imgPreview($event, 1)"/>
      </div>
      <div class="msg">
        <p>请保持姓名和身份证号信息与证件<span>信息一致！</span></p>
        <p>保证所有信息<span>清晰完整</span></p>
      </div>
      <button class="flowBtn" @click="send">提交审核</button>
      <prompt ref="prompt" :promptText="promptText"></prompt>
      <loading ref="loading"></loading>
    </div>
  </div>
</template>
js:

data () {
  return {
    promptText: '',
    front_pic: ''
  }
},

// 上传图片
imgPreview: function (e, index) {
  // 获取文件
  var file = e.target.files[0]
  var imageType = /^image\//
  // 是否是图片
  if (!imageType.test(file.type)) {

　　this.promptText=‘请选择图片！’
    return
  }
  var formData = new FormData()
  formData.append('file', file)
  this.$refs.loading.show()
  this.$http.post(this.publicUrl + 'upload/picture', formData).then(function (response) {
    this.$refs.loading.show()
    if (response.data.status === -1) {
      this.promptText = response.data.msg
      this.$refs.prompt.show()
    } else {
      this.front_pic = this.publicUrl + response.data.data.url // 提交图片获取URL，返回
    }
  }, function () {
    this.promptText = '请求失败'
    this.$refs.prompt.show()
  })
}
css:

.personPic{
  padding-top: 1rem;
  font-size: 0.3rem;
  .inner{
    padding: 0.8rem 0.8rem 0;
    .upload{
      position: relative;
      width: 100%;
      height: 7rem;
      background:#f7f7f7 url("../../assets/images/upload.png") no-repeat 1.2rem center;
      background-size: 0.7rem 0.7rem;
      border-radius: 0.01rem;
      margin-bottom: 0.4rem;
      overflow: hidden;
      p{
        color: #1a4cbf;
        margin-bottom: 0.1rem;
      }
      span{
        color: #999999;
      }
      .txt{
        text-align: center;
        padding: 3.1rem 0 0 1rem;
      }
      input{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
      img{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 0.01rem;
      }
    }
    .msg{
      text-align: center;
      line-height: 0.5rem;
      font-size: 0.28rem;
      p{
        color: #666666;
        span{
          color: #fe5642;
        }
      }
    }
  }
}