表单中包含上传图片

问题：表单中包含上传图片的功能，相应的接口参数只接受 URL（string类型）

解决方法：获取input中的file后，调用上传图片的接口（后台将图片保存在文件服务器，返回url地址）

// 实际显示的图片
<img  class="ad-img-wrap" :src="form.imgUrl" @click="clickImage">
<input type="file" @change="changeImgHandler($event)" ref="adImg" style="display: none;"  accept="image/*">

changeImageHandler () {
  this.$refs.adImg.dispatchEvent(new MouseEvent('click'))
}

changeImgHandler (e) {
  let fileName = this.$refs.adImg.value
  this.form.imgInputVal = fileName
  let list = fileName.split('.')
  let type = list[list.length - 1]
  let flag = false
  // imgFormat 为所有图片类型的数组
  for (let i = 0; i < imgFormat.length; i++) {
    if (imgFormat[i] === type) flag = true
  }
  if (!flag) {
    this.$message({
      message: '请选择图片',
      type: 'warning'
    })
    return false
  }
  this.form.imgHasChanged = true
  this.form.imgFile = e.target.files[0]  // 此处接受到 file 文件
}

// 调用方法
asnyc submit() {
  const formData = new FormData()
  // 上传文件接口要求的参数名为  file
  formData.append('file', that.form.imgFile)
  // API.uploadFile 为接口地址
  let ret = await that.$http.post(API.uploadFile, formData)
}