input 图片上传功能

input 图片上传功能

<div class="upload-file" style="">
    <div id='bg' 
          :style="'background-image:url('+ img +')'">

    </div>
    <!-- <img v-if='img' :src="img" alt="" > -->
    <input type="file" accept="image/*" @change='upload'>
</div>

upload(e) {
  let that  = this
  let file = e.target.files[0]
  if(file) {
    if (!/image\/\w+/.test(file.type)) {
      alert("请确保文件为图像类型")
      return false;
    }
    // 图片预览 存在裁剪问题
    //const formData = new FormData()
    //formData.append('file', file)
    //axios(url,[,config]).then().catch()
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function() {
      //console.log(this.result)
      that.img = this.result
      let base64 = this.result
      let data = {
        order_id,
        base64
      }
      axios(`${baseUrl}/order/xxxxxx/`, {
        method: 'post',
        headers: {
          "content-type": "application/x-www-form-urlencoded",
          'Accept': 'application/json'
        },
        data:qs.stringify(data),
        withCredentials: true
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      }) 
    } 
  }
},