Image upload and compression: VUE + VUX

<template>
  <div class="screen">
    <section class="uploader"> <span> Upload id photo (maximum of two) : </span> <div class="finish_room">
        <div class="finish_room2">
          <div
            v-for="(item ,index ) in imgs_report.imgSrc1"
            class="room_img"
            @click="changeBig"
            :key="index"
          >
            <img :src="item" class="img">
            <span @click.stop="delete_img_repo(index)">
              <img src="http://img.life.cntaiping.com/lxjk/TPDroad/second/img/del.png" alt>
            </span>
          </div>
          <div class="room_add_img" v-show="isAdd2">
            <span>
              <img src="http://img.life.cntaiping.com/lxjk/TPDroad/second/img/add_img.png">
            </span>
            <input
              v-if="isEvent"
              @change="add_img_repo"
              id="upload2"
              type="file"
              accept="image/png, image/jpg"
              multiple="multiple"
            >
          </div>
          <div class="zoom_img" @touchmove.prevent v-show="isBig" @click.stop="stop">
            <img :src="item_big" alt width="300" height="300"> </div> </div> </div> </section> <! --> <attention v-if="showWindow" :information="information"></attention> <! --> <div v-transfer-dom> <loading :show="showOrNot" :text="text"></loading>
    </div>
  </div>
</template>Copy the code

Part 2. Js

<script>
import attention from ".. /common/attention.vue";
import lrz from "lrz";
import { Loading, TransferDom } from "vux";
export default {
  components: {
    Loading,
    attention
  },
  directives: {
    TransferDom
  },
  data() {
    return {
      showOrNot: false,
      text: "Uploading...",
      isEvent: true,
      showWindow: false,
      isAdd2: true,
      imgs_report: { imgSrc1: [], imgSrc2: [] },
      imgs_report_list: [],
      isBig: false,
      item_big: ""
    };
  },
  methods: {
    timeOut() {
      setTimeout(() => {
        this.showWindow = false; }, 1500); }, // uploadImg(arr, num) {let uploaderList = event.target.files;
      var id = event.target.id;
      if (uploaderList.length > num) {
        this.showWindow = true;
        this.information = "The number of pictures you have uploaded exceeds" + num + "Zhang, please upload it again.";
        this.timeOut();
      } else {
        for (var i = 0; i < uploaderList.length; i++) {
          var img = event.target.files[i];
          this.showOrNot = true; LRZ (img, {quality: 0.4}). Then (RST => {if (arr.imgSrc1.length < num) {
              arr.imgSrc1.push(rst.base64);
              arr.imgSrc2.push(rst.file);
            }
            if (arr.imgSrc1.length > num) {
              arr.imgSrc1.map((item, index) => {
                if(index > num - 1) { arr.imgSrc1.splice(num - 1, arr.imgSrc1.length - num); arr.imgSrc2.splice(num - 1, arr.imgSrc1.length - num); }}); }if (arr.imgSrc1.length == num) {
              this.isAdd2 = false; }}); Imgs_report.imgsrc1.splice (index, 1);} // Delete id photo delete_img_repo(index) {this.imgs_report.imgsrc1.splice (index, 1);if (this.imgs_report.imgSrc1.length < 2) {
        this.isAdd2 = true; } this.imgs_report.imgSrc2.splice(index, 1); }, // upload id photo add_img_repo(event) {this.uploadimg (this.imgs_report, 2); }, changeBig(e) { this.item_big = e.target.currentSrc; this.isBig =true;
      this.isEvent = false;
    },
    stop() {
      this.isBig = false;
      this.isEvent = true; }},mounted() {
    this.$controlShare("hideOptionMenu");
  },
  updatedVar that = this; $(".img").load(function() {
      that.showOrNot = false; }); }}; </script>Copy the code