VUE上传图片

<!--
  气味照相机，上传图片
-->
<template>
  <div class="main_container" >
    <div class="bgimg_box" :style="'background-image: url(' + bgImg + ');'">
      <div class="img_container" v-if="updateState == 0">
        <div class="title">点击选择上传图片</div>
        <!-- <div class="idcard_pannel flex">
          <input type="file" accept="image/*" @change="chooseImg($event,'fileUpdate')"/>
          <img :src="fileFront" alt="">
        </div> -->
        <div class="img_upload">
            <van-uploader :after-read="afterRead" class="vloader"/>
        </div>
      </div>
      <div class="img_container" v-if="updateState != 0">
        <div class="img_show" v-if="cuteState == 0">
          <VueCropper ref="vcropper"
              :img='imgadjust'
              :info=option.info
              :outputSize=option.outputSize
              :outputType=option.outputType
              :autoCrop=option.autoCrop
              :canMove=option.canMove
              :autoCropWidth=option.autoCropWidth
              :autoCropHeight=option.autoCropHeight
              :original=option.original
              :infoTrue=option.infoTrue
              :centerBox=option.centerBox
              :canMoveBox=option.canMoveBox
              :fixedBox=option.fixedBox
              :canScale=option.canScale
              @real-time="realTime">
          </VueCropper>
        </div>
        <div class="img_cmd" v-if="cuteState == 0">
                    <!-- <button @click="changeScale(1)" class="btn">+</button>
                    <button @click="changeScale(-1)" class="btn">-</button> -->
          <button @click="imgcute" class="btn">裁剪</button>
        </div>
        <div class="img_show" v-if="cuteState == 1">
          <img :src="imgadjust" alt="" class="imgcuted">
          <div class="img_div">
            <img :src="btnReupdate" alt="" class="img_select">
          </div>
        </div>
      </div>
      <footer class="footer">
        <div
          class="next_btn"
          :style="'background-image: url(' + btnImg + ');'"
          @click="updateFileAction($event, updateState)"></div>
      </footer>
    </div>
  </div>
</template>
<script>
import _ from '../../util/api'
import bgImg from '@/assets/img/updateimg/bg.png'
import selectImg from '@/assets/img/updateimg/uploadpictures.png'
import updateImg from '@/assets/img/updateimg/affirm.png'
import sucImg from '@/assets/img/updateimg/successfullyupload.png'
import reupdate from '@/assets/img/updateimg/choosephotos.png'
import { VueCropper } from 'vue-cropper'

export default {
  name: 'camera',
  data () {
    return {
      bgImg,
      btnImg: selectImg,
      btnReupdate: reupdate,
      imageUrl: '',
      params: {
        picid: this.$route.query.phid || ''
      },
      preimg: {},
      updateState: 0, // 0选择图片 1确认上传 2完成上传
      cuteState: 0, // 0 未裁剪图片 1已经裁剪
      imgadjust: {},
      option: {
        outputSize: 1,
        outputType: 'jpeg',
        canScale: true,
        autoCrop: true,
        canMove: true,
        autoCropWidth: 420,
        autoCropHeight: 600,
        fixed: true,
        original: false,
        infoTrue: false,
        centerBox: false,
        canMoveBox: true,
        fixedBox: true,
        enlarge: true
      }
    }
  },
  components: {
    VueCropper
  },
  methods: {
    updateFileAction (e, type) {
      if (type == 0) {
        console.log('当前状态1：' + type)
        this.$error('请选择图片！')
      } else if (type == 1) {
        console.log('picid:' + this.params.picid)
        const formData = new FormData()
        formData.append('file', this.preimg)
        formData.append('phid', this.params.picid)

        _.uploadImgFile(formData).then(rsp => {
          this.btnImg = sucImg
          this.updateState = 2
          this.cuteState = 1
          console.log(rsp)
          console.log('图片上传成功')
        }, () => {
          this.$error('图片上传失败')
        })
        console.log('当前状态2：' + type)
      } else if (type == 2) {
        this.updateState = 0
        this.cuteState = 0
        this.btnImg = selectImg
        this.preimg = {}
        console.log('当前状态3：' + type)
      }
    },
    getObjectURL (file) {
      var url = null
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(file)
      } else if (window.URL !== undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    },
    transformToBase64 (file) {
      if (!window.FileReader) {
        console.log('浏览器对FileReader方法不兼容')
      } else {
        const reader = new FileReader()
        reader.readAsDataURL(file)// 读出 base64
        return reader.result
      }
    },
    afterRead (res) {
      // console.log(res, '///')
      if (res) {
        this.updateState = 1
        this.btnImg = updateImg
        this.preimg = res.file
        console.log('选择图片成功')
        console.log(this.preimg)
        const reader = new FileReader()
        reader.readAsDataURL(this.preimg)// 读出 base64
        this.imgadjust = this.getObjectURL(res.file)
        console.log('加载选择图片：')
        console.log(this.imgadjust)
      }
    },
    realTime(data) {
      //console.log(data)
    },
    imgcute() {
      this.$refs.vcropper.getCropBlob((data) => {
        let img = this.getObjectURL(data)
        this.imgadjust = img
        this.preimg = new File([data], `2022b8656c546dd2544301deb388f012c5d.png`);
        this.cuteState = 1
      })
    }
  }
}
</script>
<style lang="less" scoped>
.main_container {
  width: 100%;
  min-height: 100vh;
  position: relative;

  .bgimg_box {
    width: 100%;
    position: relative;
    min-height: 1333px;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    .footer {
      position: fixed;
      bottom: 71px;
      height: 71px;
      justify-content: bottom;
      z-index: 200;

      .next_btn {
        width: 201px;
        height: 71px;
        box-sizing: border-box;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        font-size: 34px;
        font-family: inpinzhusongti;
        font-weight: 400;
        font-style: italic;
        color: #fff;
        text-align: center;
      }
    }
  }

  .img_container {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;

    .title {
      font-size: 56px;
      font-weight:bold;
      font-family:'Times New Roman', Times, serif;
      margin-top: 300px;
    }

    .img_upload{
      width: 360px;
      height: 360px;
      position: relative;
      text-align: center;
      vertical-align: middle;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      margin-top: 100px;
      background-image: url('../../assets/img/updateimg/center.png');
      .vloader{
        position: relative;
        top: 50%;
        margin-top: 8px;
        margin-left: 8px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }

    .img_show{
      margin-top:30px;
      width: 90%;
      height: 80%;
      text-align: center;
      .imgcute{
        width: 100%;
        margin-left: 20px;
        margin-top: 50px;
        margin-right: 20px;
      }
      .cropper{
        width: 100%;
        height: 100%;
      }
      .imgcuted{
        margin: 0,auto;
        width: 100%;
      }
      .img_div{
        width: 100%;
        text-align:right;
        .img_select{
          width: 108px;
          height: 108px;
          z-index: 200;
          bottom: 100%;
          right: 100%;
        }
      }
    }
    .img_cmd{
      margin-top: 5px;
      width: 90%;
      height: 48px;
      align-items: center;
      text-align: center;
      .btn{
        width: 108px;
        height: 48px;
        margin-top: 10px;
        margin-left: 15px;
        margin-right: 15px;
        background-color: rgb(63, 134, 34);
        border-radius: 12px;
      }
    }
  }
}
</style>

上传图片到服务端。