vue-cropperプラグインは、画像キャプチャとアップロードコンポーネントのカプセル化を実現します。

<テンプレート>
  <div>
    <アップロード
      名前="アバター"
      リストタイプ="絵カード"
      クラス="アバターアップローダー"
      :アップロードリストを表示="false"
      :custom-request="カスタムリクエスト"
      :before-upload="アップロード前"
      :style="`幅: ${width}; 高さ: ${height};`"
    >
      <画像
        v-if="imageUrl && !loading"
        :src="画像URL"
        alt="アバター"
        :style="`幅: ${width}; 高さ: ${height};`"
      />
      <div v-else>
        <a-icon :type="読み込み中? '読み込み中' : 'プラス'" />
        <div class="ant-upload-text">写真をアップロード</div>
      </div>
    </a-アップロード>
    <a-モーダル
      v-model="imageCut.isShowModal"
      title="画像キャプチャ"
      幅="400px"
      @ok="終了"
      @cancel="imageCut.close"
    >
      <div class="cropper-content" v-if="imageCut.isShowModal">
        <div class="cropper" style="text-align:center">
          <vueクロッパー
            ref="クロッパー"
            :img="imageCut.imgファイル"
            :outputSize="出力サイズ"
            :outputType="出力タイプ"
            :info="情報"
            :full="フル"
            :canMove="移動可能"
            :canMoveBox="canMoveBox"
            :original="オリジナル"
            :autoCrop="自動クロップ"
            :fixed="固定"
            :fixedNumber="固定数"
            :centerBox="センターボックス"
            :infoTrue="情報True"
            :fixedBox="固定ボックス"
          </vueクロッパー>
        </div>
      </div>
    </a-modal>
  </div>
</テンプレート>

<スクリプト>
'@/api/common' から { uploadImage } をインポートします。
「vue-cropper」から VueCropper をインポートします。
エクスポートデフォルト{
  名前: 'ImageUpload',
  コンポーネント: { VueCropper },
  データ（） {
    戻る {
      読み込み中: false、
      画像カット: {
        isShowModal: false、
        画像ファイル: '',
        初期化: imgFile => {
          this.imageCut.imgFile = 画像ファイル
          this.imageCut.isShowModal = true
        },
        閉じる: () => {
          this.imageCut.imgFile = ''
          this.imageCut.isShowModal = false
        }
      }
    }
  },
  小道具: {
    imageUrl: 文字列、
    幅： {
      タイプ: 文字列、
      デフォルト: '100px'
    },
    身長：
      タイプ: 文字列、
      デフォルト: '100px'
    },
    カット可能: {
      タイプ: ブール値、
      デフォルト: false
    },
    情報：
      タイプ: ブール値、
      デフォルト: false
    }, // クロップボックスのサイズ情報 outputSize: {
      タイプ: 数値、
      デフォルト: 0.8
    }, // 切り抜かれた画像の品質 outputType: {
      タイプ: 文字列、
      デフォルト: 'jpeg'
    }, // 画像形式を生成するために切り取る canScale: {
      タイプ: ブール値、
      デフォルト: true
    }, // 画像がスクロールホイールによるズームを許可するかどうか autoCrop: {
      タイプ: ブール値、
      デフォルト: true
    }, // デフォルトでスクリーンショットフレームを生成するかどうか // autoCropWidth: 300, // スクリーンショットフレームのデフォルトの幅 // autoCropHeight: 200, // スクリーンショットフレームのデフォルトの高さ fixedBox: {
      タイプ: ブール値、
      デフォルト: false
    }, // スクリーンショットのフレームサイズを変更できない問題を修正しました。
      タイプ: ブール値、
      デフォルト: true
    }, // スクリーンショットフレームの幅と高さの固定比率を有効にするかどうか fixedNumber: {
      タイプ: 配列、
      デフォルト: () => [1, 1]
    }, // スクリーンショットフレーム全体のアスペクト比: {
      タイプ: ブール値、
      デフォルト: true
    }, // スクリーンショットを元の比率で出力するかどうか canMove: {
      タイプ: ブール値、
      デフォルト: false
    },
    移動できるボックス: {
      タイプ: ブール値、
      デフォルト: true
    }, // スクリーンショットのフレームをドラッグできますか？ オリジナル: {
      タイプ: ブール値、
      デフォルト: false
    }, // アップロードされた画像を元の比率に従ってレンダリングします centerBox: {
      タイプ: ブール値、
      デフォルト: true
    }, // スクリーンショットボックスは画像に限定されますか? infoTrue: {
      タイプ: ブール値、
      デフォルト: true
    } // 実際の出力画像の幅と高さを表示するには true、スクリーンショットのフレームの幅と高さを表示するには false },
  メソッド: {
    beforeUpload(ファイル) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      もし (!isJpgOrPng) {
        this.$message.error('JPG または PNG ファイルをアップロードしてください!')
      }
      定数isLt2M = ファイルサイズ / 1024 / 1024 < 2
      もし (!isLt2M) {
        this.$message.error('2MB未満のファイルをアップロードしてください!')
      }
      isJpgOrPng && isLt2M を返す
    },
    カスタムリクエスト(ファイル) {
      （これがカットできる場合）{
        this.readFile(ファイル.ファイル)
      } それ以外 {
        this.loading = true
        const フォームデータ = 新しいフォームデータ()
        formData.append('fileIdcard', ファイル.ファイル)
        画像をアップロードします(formData).then(res => {
          this.loading = false
          this.$emit('uploadSuccess', res.ossUrl)
        })
      }
    },
    readFile(ファイル) {
      var リーダー = 新しい FileReader()
      reader.readAsDataURL(ファイル)
      リーダー.onload = () => {
        this.imageCut.init(リーダー.結果)
      }
    },
    仕上げる（） {
      this.$refs.cropper.getCropBlob(データ => {
        this.loading = true
        // Alibaba Cloud サーバーにアップロード const formData = new FormData()
        formData.append('fileIdcard', データ)
        画像をアップロードします(formData).then(res => {
          this.imageCut.close()
          this.loading = false
          this.$emit('uploadSuccess', res.ossUrl)
        })
      })
    }
  }
}
</スクリプト>

<スタイル lang="less">
.avatar-uploader > .ant-upload {
  幅: 100%;
  高さ: 100%;
}
.ant-upload-select-picture-card i {
  フォントサイズ: 32px;
  色: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  上マージン: 8px;
  色: #666;
}
.クロッパーコンテンツ{
  .クロッパー{
    幅: 自動;
    高さ: 400px;
  }
}
</スタイル>

<画像アップロード
        :imageUrl="form.diagramUrl"
        @uploadSuccess="アップロード成功"
        幅="160px"
        高さ="90px"
        :can-edit="canCut"
        :固定数="[16,9]"
      />