vue element 自定义上传

实名认证上传.png

如图所示：该需求是【手动上传证件照】，点击提交，将文本和图片一起传给后台！
文本输入框样式 可以自由发挥
主要是解一下上传样式，跑跑就简单粗暴上代码了！！！（各位小主们仔细看好咯）

    <!-- 上传 -->
    <el-form class="form"
             :model="form"
             label-position="top">
      <!-- 证件正面照 -->
      <el-form-item :label="'证件正面照'"
                    prop="name">
        <el-upload class="avatar-uploader"
                   :auto-upload='false'
                   :show-file-list="false"
                   :multiple='false'
                   action=''
                   :on-change="httpRequestPosi">
          <!-- 缩略图 -->
          <div style="width:360px;height:180px"
               v-if="positive">
            <img :src="positive"
                 class="avatar"
                 width="100%"
                 height="100%">
          </div>
          <!-- 上传提示 -->
          <div v-else>
            <i class="el-icon-upload avatar-uploader-icon"></i>
            <div class="el-upload__text">
              点击上传
            </div>
          </div>
        </el-upload>
      </el-form-item>
      <!-- 证件反面照 -->
      <el-form-item label="证件反面照"
                    prop="idType">
        <el-upload class="avatar-uploader"
                   :auto-upload='false'
                   :show-file-list="false"
                   :multiple='false'
                   action=''
                   :on-change="httpRequestNega">
          <!-- 缩略图 -->
          <div style="width:360px;height:180px"
               v-if="negative">
            <img :src="negative"
                 class="avatar"
                 width="100%"
                 height="100%">
          </div>
          <!-- 上传提示 -->
          <div v-else>
            <i class="el-icon-upload avatar-uploader-icon"></i>
            <div class="el-upload__text">
              点击上传
            </div>
          </div>
        </el-upload>
      </el-form-item>
      <!-- 手持证件照 -->
      <el-form-item :label="'手持证件照'"
                    prop="idNumber">
        <el-upload class="avatar-uploader"
                   :auto-upload='false'
                   :show-file-list="false"
                   :multiple='false'
                   action=''
                   :on-change="httpRequestHand">
          <!-- 缩略图 -->
          <div style="width:360px;height:180px"
               v-if="hand">
            <img :src="hand"
                 class="avatar"
                 width="100%"
                 height="100%">
          </div>
          <!-- 上传提示 -->
          <div v-else>
            <i class="el-icon-upload avatar-uploader-icon"></i>
            <div class="el-upload__text">
              点击上传
            </div>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <!-- 提交 -->
    <el-button type="primary"
               style="width:100%"
               @click="authClick"
               :loading="authLoading">提交</el-button>
  </div>
</div>

</div>
</template>

<script>
import axios from 'axios'
export default {
data () {

return {
  form: {
    realName: '',
    certificateType: '',
    certificateNo: '',
    positive: '',
    negative: '',
    hand: ''
  },
  authLoading: false,
  // 上传证件照

  formDate: '',
  action: '接口地址',

  // 缩略图
  positive: '',
  negative: '',
  hand: ''
}

},

created () {
this.formDate = new FormData()
},

methods: {

// 上传正面照
httpRequestPosi (file) {
  this.form.positive = file.raw
  // 获取缩略图
  var that = this
  var reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = function () {
    that.positive = reader.result
  }
},
// 上传反面照
httpRequestNega (file) {
  this.form.negative = file.raw
  // 获取缩略图
  var that = this
  var reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = function () {
    that.negative = reader.result
  }
},
// 上传手持照
httpRequestHand (file) {
  this.form.hand = file.raw
  // 获取缩略图
  var that = this
  var reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = function () {
    that.hand = reader.result
  }
},
//  证件上传
authClick () {
      this.authLoading = true
      this.formDate.append('realName', this.form.realName)
      this.formDate.append('certificateType', this.form.certificateType)
      this.formDate.append('certificateNo', this.form.certificateNo)
      this.formDate.append('positive', this.form.positive)
      this.formDate.append('negative', this.form.negative)
      this.formDate.append('hand', this.form.hand)

      let config = {
        headers: {
          Authorization: 'token（根据自己的项目获取token）'
        }
      }
      axios.post( this.action, this.formDate, config).then(res => {
          this.authLoading = false
          if (res.data.code === 0) {
            this.$message.success('操作成功')
            this.form = {}
            this.positive = ''
            this.negative = ''
            this.hand = ''
          } else {
            this.$message.error(res.data.message)
            this.form = {}
            this.positive = ''
            this.negative = ''
            this.hand = ''
          }
        }).catch(() => {
          this.authLoading = false
          this.form = {}
          this.positive = ''
          this.negative = ''
          this.hand = ''
        })
    }

}
}
</script>

<style lang="less" scoped>

  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 360px;
    height: 180px;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .avatar-uploader-icon {
    font-size: 58px;
    color: #8c939d;
    text-align: center;
  }

</style>