Das Vue-Cropper-Plugin realisiert die Kapselung der Bildaufnahme- und Upload-Komponente

<Vorlage>
  <div>
    <a-hochladen
      Name = "Avatar"
      Listentyp = "Bildkarte"
      Klasse = "Avatar-Uploader"
      :show-upload-list="false"
      :custom-request="BenutzerdefinierteAnfrage"
      :before-upload="vor dem Hochladen"
      :style="`Breite: ${width}; Höhe: ${height};`"
    >
      <Bild
        v-if="Bild-URL && !wird geladen"
        :src="Bild-URL"
        alt="Avatar"
        :style="`Breite: ${width}; Höhe: ${height};`"
      />
      <div v-sonst>
        <a-icon :type="wird geladen ? 'wird geladen' : 'plus'" />
        <div class="ant-upload-text">Bilder hochladen</div>
      </div>
    </a-upload>
    <a-modal
      v-Modell = "imageCut.isShowModal"
      Titel="Bildaufnahme"
      Breite="400px"
      @ok="fertig"
      @cancel="Bild ausschneiden.schließen"
    >
      <div Klasse="cropper-content" v-if="imageCut.isShowModal">
        <div Klasse="cropper" Stil="text-align:center">
          <vueCropper
            ref="Beschneider"
            :img="imageCut.imgFile"
            :outputSize="Ausgabegröße"
            :outputType="Ausgabetyp"
            :info="Informationen"
            :voll="voll"
            :canMove="kannBewegen"
            :kannBoxVerschieben="kannBoxVerschieben"
            :original="Original"
            :autoCrop="automatisch zuschneiden"
            :fixiert="behoben"
            :festeNummer="festeNummer"
            :centerBox="Mittelbox"
            :infoTrue="infoTrue"
            :festeBox="festeBox"
          ></vueCropper>
        </div>
      </div>
    </a-modal>
  </div>
</Vorlage>

<Skript>
importiere { uploadImage } von '@/api/common'
importiere { VueCropper } von "vue-cropper";
Standard exportieren {
  Name: 'BildUpload',
  Komponenten: { VueCropper },
  Daten() {
    zurückkehren {
      wird geladen: falsch,
      Bildschnitt: {
        isShowModal: false,
        imgDatei: '',
        init: imgFile => {
          this.imageCut.imgFile = Bilddatei
          this.imageCut.isShowModal = true
        },
        schließen: () => {
          this.imageCut.imgFile = ''
          this.imageCut.isShowModal = false
        }
      }
    }
  },
  Requisiten: {
    imageUrl: Zeichenfolge,
    Breite: {
      Typ: Zeichenfolge,
      Standard: „100px“
    },
    Höhe:
      Typ: Zeichenfolge,
      Standard: „100px“
    },
    kann ausschneiden: {
      Typ: Boolean,
      Standard: false
    },
    Info:
      Typ: Boolean,
      Standard: false
    }, // Informationen zur Größe des Zuschneidefelds outputSize: {
      Typ: Nummer,
      Standard: 0,8
    }, // Die Qualität des zugeschnittenen Bildes outputType: {
      Typ: Zeichenfolge,
      Standard: „jpeg“
    }, // Zuschneiden zum Erzeugen des Bildformats canScale: {
      Typ: Boolean,
      Standard: true
    }, // Ob das Bild das Zoomen mit dem Scrollrad zulässt autoCrop: {
      Typ: Boolean,
      Standard: true
    }, // Ob standardmäßig ein Screenshot-Rahmen generiert werden soll // autoCropWidth: 300, // Die Standardbreite des Screenshot-Rahmens // autoCropHeight: 200, // Die Standardhöhe des Screenshot-Rahmens fixedBox: {
      Typ: Boolean,
      Standard: false
    }, // Behoben: Screenshot-Framegröße kann nicht geändert werden behoben: {
      Typ: Boolean,
      Standard: true
    }, // Ob das feste Verhältnis von Breite und Höhe des Screenshot-Rahmens aktiviert werden soll fixedNumber: {
      Typ: Array,
      Standard: () => [1, 1]
    }, // Das Seitenverhältnis des Screenshot-Frames full: {
      Typ: Boolean,
      Standard: true
    }, // Ob der Screenshot in der Originalproportion ausgegeben werden soll canMove: {
      Typ: Boolean,
      Standard: false
    },
    kannBox verschieben: {
      Typ: Boolean,
      Standard: true
    }, // Kann der Screenshot-Rahmen ins Original gezogen werden: {
      Typ: Boolean,
      Standard: false
    }, // Rendere das hochgeladene Bild entsprechend dem Originalverhältnis centerBox: {
      Typ: Boolean,
      Standard: true
    }, // Ist das Screenshot-Feld auf das Bild beschränkt? infoTrue: {
      Typ: Boolean,
      Standard: true
    } // true, um die tatsächliche Breite und Höhe des Ausgabebildes anzuzeigen. false, um die Breite und Höhe des Screenshot-Rahmens anzuzeigen. },
  Methoden: {
    vorUpload(Datei) {
      const isJpgOrPng = Dateityp === 'Bild/jpeg' || Dateityp === 'Bild/png'
      wenn (!istJpgOrPng) {
        this.$message.error('Bitte laden Sie eine JPG- oder PNG-Datei hoch!')
      }
      const isLt2M = Dateigröße / 1024 / 1024 < 2
      wenn (!isLt2M) {
        this.$message.error('Bitte laden Sie eine Datei unter 2 MB hoch!')
      }
      Rückgabewert ist JpgOrPng und isLt2M
    },
    benutzerdefinierteAnfrage(Datei) {
      wenn (dies.kannSchnitt) {
        this.readFile(Datei.Datei)
      } anders {
        dies.laden = wahr
        const formData = new FormData()
        formData.append('fileIdcard', datei.datei)
        Bild hochladen(formData).then(res => {
          dies.laden = falsch
          dies.$emit('uploadSuccess', res.ossUrl)
        })
      }
    },
    leseDatei(Datei) {
      var reader = neuer FileReader()
      reader.readAsDataURL(Datei)
      reader.onload = () => {
        dies.imageCut.init(reader.result)
      }
    },
    beenden() {
      dies.$refs.cropper.getCropBlob(data => {
        dies.laden = wahr
        // Auf Alibaba Cloud-Server hochladen const formData = new FormData()
        formData.append('fileIdcard', Daten)
        Bild hochladen(formData).then(res => {
          dies.imageCut.close()
          dies.laden = falsch
          dies.$emit('uploadSuccess', res.ossUrl)
        })
      })
    }
  }
}
</Skript>

<style lang="less">
.avatar-uploader > .ant-upload {
  Breite: 100 %;
  Höhe: 100%;
}
.ant-upload-select-picture-card ich {
  Schriftgröße: 32px;
  Farbe: #999;
}

.ant-upload-Bildkarte auswählen .ant-upload-text {
  Rand oben: 8px;
  Farbe: #666;
}
.cropper-Inhalt {
  .cropper {
    Breite: automatisch;
    Höhe: 400px;
  }
}
</Stil>

<Bild-Upload
        :imageUrl="form.diagramUrl"
        @uploadSuccess="UploadErfolgreich"
        Breite="160px"
        Höhe="90px"
        :kann-bearbeiten="kannSchneiden"
        :feste Zahl="[16,9]"
      />