vue实现上传上删除压缩图片

<script>
  import {Config} from '@/config.js'
  import {mapState} from 'vuex'
  import {LocalData, toast, WX} from '@/utils/common'
  import {FileUtil} from '@/utils/FileUtil'
  import {PayUtil} from '@/utils/PayUtil'
  import Vue from 'vue'
  import {Checklist, Indicator, Popup} from 'mint-ui'
  import xImg from '@/components/x-img'

  Vue.component(Checklist.name, Checklist)
  Vue.component(Popup.name, Popup)
  let imgLimit = 100
  let vm
  export default {
    name: 'signing',
    components: {
      xImg
    },
    data() {
      return {
        contractno:undefined,//合同号
        totle_sum: undefined,//总车辆数
        totle_r: undefined,//常规租赁总租金
        totle_s: undefined,//以租代购总租金
        totle_b: undefined,//总保证金
        first_t: undefined,//首付款总金额
        sign_address: '',//签约地点
        sing_time: '',//签约时间
        sign_remark: '',//备注
        operator_name: '',//经办人
        imgs: {},
        imgLen:0,
        updataImg: '../../static/img/update.jpg ',

        selectImgs: [{}],
        images: [],
      }
    },
    computed: {
      ...mapState({
        signContract: state => state.signing.signContract,
        totleRent: function () {
          this.totle_sum = 0
          this.totle_r = 0
          this.totle_s = 0
          this.totle_b = 0
          this.first_t = 0
          let _length = this.signContract.cardetail.length
          let _array = this.signContract.cardetail
          for (let i = 0; i < _length; i++) {
            //获取车辆数
            this.totle_sum += parseInt(_array[i].number)
            //获取常规租赁租金
            this.totle_r += parseInt(_array[i].rent_total)
            //获取以租代购租金
            this.totle_s += parseInt(_array[i].rent_sum)
            //获取保证金
            this.totle_b += parseInt(_array[i].bond_total)
            //获取首付款总额
            this.first_t += parseInt(_array[i].first_total)

          }
        },
      }),
    },
    methods: {
      getSignContract: function () {
        let rel = this;
        rel.$store.dispatch('signing/getsignContract', {
          params: {
            contractno: this.contractno
          },
          // callBack(data) {
          //   rel.operator_name = data.operator_name
          // }
        })
      },
      selectImage () {
        if (this.$refs.fileInput[0].files.length > 0) {
          const file = this.$refs.fileInput[0].files[0]
          const vm = this
          const temp = this.selectImgs[this.selectImgs.length - 1]
          Vue.set(temp, 'src', 'loadding')
          FileUtil.compress(file, {
            onSuccess (result) {
              let rst = result[0]
              temp.src = rst.base64
              temp.file = rst.file
              temp.name = rst.origin.name
              vm.images.push({
                src: rst.base64
              })
              if (vm.selectImgs.length < imgLimit) {
                vm.selectImgs.push({})
              }
            },
            onFail (err) {
              temp.src = undefined
              toast.show(JSON.stringify(err))
            },
            onFinish () {
            }
          })
        }
      },
      delImg (index) {
        this.selectImgs.splice(index, 1)
        this.images.splice(index, 1)
        if (this.selectImgs.length > 0) {
          let temp = this.selectImgs[this.selectImgs.length - 1]
          if (temp.src) {
            this.selectImgs.push({})
          }
        }
        else {
          this.selectImgs.push({})
        }
      },
      submit() {
        if (!this.sing_time) {
          toast.show('请选着签约时间')
          return
        }
        else if(!this.sign_address){
          toast.show('请填写签约地址')
          return
        }
        else if(!this.sign_remark){
          toast.show('请简要填写备注')
          return
        }
        let formData = new FormData()
        formData.append('token', LocalData.getToken())
        formData.append('contractno', this.contractno)
        formData.append('sing_time', this.sing_time)
        formData.append('sign_address', this.sign_address)
        formData.append('sign_remark', this.sign_remark)
        for (let index = 0; index < this.selectImgs.length - 1; index++) {
          if (this.selectImgs[index] != null) {
            formData.append('uploadImg', this.selectImgs[index].file, this.selectImgs[index].name)
          }
        }
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        Indicator.open()
        this.$axios.post('applease/internallySignedImg', formData, config).then(
          response => {
            Indicator.close()
            if (response.data.code == 0) {

            }
            toast.show(response.data.message)
          }).catch(error => {
          console.log(error)
          Indicator.close()
          toast.show('网络异常，上传失败')
        })
      }
    },
    created: function () {
      vm = this
      this.contractno = this.$route.query.contractNo
      this.getSignContract()//合同车辆信息接口处理
    }
  }
</script>

<div class="img-box">
  <div class="up-img">
    <template v-for="(img,index) of selectImgs">
      <template v-if="!img || !img.src">
        <em>
          <input type="file" accept="image/jpeg,image/jpg,image/png,image/x-png,image/gif" @change="selectImage"
                 ref="fileInput"/>
          <img :src="updataImg"/>
        </em>
      </template>
      <template v-else>
        <label>
          <template v-if="img.src && img.src != 'loadding'">
            <i slot="icon" class="item-icon parent-h-right icon-close" @click="delImg(index)"></i>
          </template>
          <x-img :src="img.src" @on-click="preview(index)"></x-img>
        </label>
      </template>
    </template>
  </div>
</div>