vue-cropper コンポーネントは画像の切り取りとアップロードを実現します

'vue-cropper' から { VueCropper } をインポートします 
コンポーネント:
  ヴュークロッパー、
},

'vue-cropper' から VueCropper をインポートします 

Vue.use(VueCropper)

<テンプレート>
  <el-ダイアログ
    title="アバターを編集"
    :visible.sync="ダイアログフォームを表示"
    :クリック時に閉じるモーダル="false"
    本文に追加
  >
    <label class="btn" for="uploads">画像を選択</label>
    <入力
      タイプ="ファイル"
      id="アップロード"
      :value="画像ファイル"
      スタイル="position:absolute; clip:rect(0 0 0 0);"
      accept="image/png、image/jpeg、image/gif、image/jpg"
      @change="uploadImg($event, 1)"
    >
    <div style="margin-left:20px;">
      <div class="show-preview" :style="{'オーバーフロー': 'hidden', 'マージン': '5px'}">
        <div :style="previews.div" class="preview" style="幅: 40px;高さ: 40px;">
          <img :src="previews.url" :style="previews.img">
        </div>
      </div>
    </div>
    <div class="cut">
      <vueクロッパー
        ref="クロッパー"
        :img="オプション.img"
        :outputSize="オプションのサイズ"
        :outputType="オプション.outputType"
        :info="true"
        :full="オプション.full"
        :canMove="オプション.canMove"
        :canMoveBox="オプション.canMoveBox"
        :original="オプション.original"
        :autoCrop="オプション.autoCrop"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        :fixedBox="オプション.fixedBox"
        @realTime="実時間"
        @imgLoad="画像読み込み"
      </vueクロッパー>
    </div>
    <div スロット="フッター" クラス="ダイアログ フッター">
      <el-button @click="dialogFormVisible = false" size="small">キャンセル</el-button>
      <el-button type="primary" @click="finish('blob')" size="small">OK</el-button>
    </div>
  </el-ダイアログ>
</テンプレート>

<スクリプト>
「vue-cropper」から VueCropper をインポートします。
エクスポートデフォルト{
  コンポーネント:
    ビュークロッパー
  },
  データ（） {
    戻る {
      プレビュー: {},
      モデル: false、
      モデルソース: "",
      ファイル名： ""、
      画像ファイル: "",
      ダイアログフォーム表示: false、
      オプション： {
        画像: "",
        outputSize: 1, //カット後の画像品質（0.1-1）
        full: false, // 元の画像の比率を出力します スクリーンショット props name full
        出力タイプ: "png",
        移動可能: true、
        オリジナル: 偽、
        canMoveBox: true、
        自動トリミング: true、
        自動クロップ幅: 40,
        自動クロップ高さ: 40,
        固定ボックス: true
      }
    };
  },
  メソッド: {
    //写真をアップロードします（アップロードボタンをクリック）
    終了(タイプ) {
      selft = this とします。
      formData を新しい FormData() にします。
      // 出力if (type === "blob") {
        selft.$refs.cropper.getCropBlob(データ => {
          img = window.URL.createObjectURL(data); とします。
          自己モデル = true;
          モデルを画像化します。
          formData.append("ファイル", データ, selft.fileName);
          selft.$api.writer.userUpload(formData, r => {
            （r.code）の場合{
              selft.$alert.error(r.msg);
            } それ以外 {
              自己t.$メッセージ({
                メッセージ: r.data.msg、
                タイプ: 「成功」
              });
              selft.$store.state.userInfo = r.data.data;
              selft.dialogFormVisible = false;
            }
          });
        });
      } それ以外 {
        this.$refs.cropper.getCropData(データ => {});
      }
    },
    //ローカル画像を選択 uploadImg(e, num) {
      console.log("アップロード画像");
      var selft = this;
      //写真をアップロード var file = e.target.files[0];
      selft.fileName = ファイル名;
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert("画像タイプは .gif、jpeg、jpg、png、bmp のいずれかである必要があります");
        false を返します。
      }
      var リーダー = 新しい FileReader();
      リーダー.onload = e => {
        データを入力します。
        if (typeof e.target.result === "オブジェクト") {
          // 配列バッファを BLOB に変換します。base64 の場合は必要ありません。data = window.URL.createObjectURL(new Blob([e.target.result]));
        } それ以外 {
          データ = e.target.result;
        }
        数値 === 1 の場合
          selft.option.img = データ;
        } そうでなければ (num === 2) {
          selft.example2.img = データ;
        }
      };
      // base64 に変換する
      // reader.readAsDataURL(ファイル)
      // ブロブに変換
      reader.readAsArrayBuffer(ファイル);
    },
    見せる（） {
      this.dialogFormVisible = true;
    },
    // リアルタイムプレビュー関数 realTime(data) {
      console.log("リアルタイム");
      this.previews = データ;
    },
    画像読み込み(メッセージ) {
      コンソールにログ出力します。
      コンソールログ(メッセージ);
    }
  }
};
</スクリプト>

<スタイル lang="less">
@import "./userLogo.less";
</スタイル>

。カット {
    幅: 300ピクセル;
    高さ: 300px;
    マージン: 0px 自動;
}

.hh {
    .el-ダイアログ__ヘッダー{
        パディング: 0px;
        行の高さ: 2;
        背景色: #f3f3f3;
        高さ: 31px;
        下境界線: 1px 実線 #e5e5e5;
        背景: #f3f3f3;
        左上の境界線の半径: 5px;
        右上の境界線の半径: 5px;
    }
    .el-ダイアログ__タイトル{
        フロート: 左;
        高さ: 31px;
        色: #4c4c4c;
        フォントサイズ: 12px;
        行の高さ: 31px;
        オーバーフロー: 非表示;
        マージン: 0;
        左パディング: 10px;
        フォントの太さ: 太字;
        テキストシャドウ: 0 1px 1px #fff;
    }
    .el-dialog__headerbtn {
        位置: 絶対;
        上: 8px;
        右: 10px;
        パディング: 0;
        背景: 0 0;
        境界線: なし;
        アウトライン: 0;
        カーソル: ポインタ;
        フォントサイズ: 16px;
    }
}

.btn{
    表示: インラインブロック;
    行の高さ: 1;
    空白: ラップなし;
    カーソル: ポインタ;
    背景: #fff;
    境界線: 1px 実線 #c0ccda;
    色: #1f2d3d;
    テキスト配置: 中央;
    ボックスのサイズ: 境界線ボックス;
    アウトライン: なし;
    //マージン: 20px 10px 0px 0px;
    パディング: 9px 15px;
    フォントサイズ: 14px;
    境界線の半径: 4px;
    色: #fff;
    背景色: #50bfff;
    境界線の色: #50bfff;
    遷移: すべて 0.2 秒の緩和;
    テキスト装飾: なし;
    ユーザー選択: なし;
}

.表示プレビュー{
    フレックス: 1;
    -webkit-flex: 1;
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-flex;
    コンテンツの中央揃え: 中央;
    中央揃え
    .プレビュー{
        オーバーフロー: 非表示;
        境界線の半径: 50%;
        境界線: 1px 実線 #cccccc;
        背景: #cccccc;
    }
}

// http リクエストインターセプター axios.interceptors.request.use(
  config => {デバッガー
    token = sessionStorage.getItem('token') とします。
    if (トークン) {
      config.headers.Authorization = トークン;
    }
    config.url が 'upload' より 0 より大きい場合、
      config.headers['Content-Type'] = 'multipart/form-data'
    }
    設定を返す
  },
  エラー => {
    Promise.reject(err) を返します。
  }
）

@RequestMapping("/アップロード")
 パブリックResultDataアップロード(@RequestParam("file")マルチパートファイルファイル) {
  userService.upload(ファイル) を返します。
 }

@オーバーライド
 パブリックResultDataアップロード(MultipartFileファイル) {
  ファイルが空の場合（！file.isEmpty()）{
   
   StringBuffer リクエスト URL = sessionUtil.getRequestURL();
   int end = requestURL.indexOf("/user/upload");
   文字列 basePath = requestURL.substring(0, end);
   文字列 savePath = basePath + "/static/img/logo/";
   // サフィックスを含むファイル名を取得します。String fileName = file.getOriginalFilename();

   文字列 saveDbPath = savePath + fileName;

   // このパスに保存されます: このパスはプロジェクト ディレクトリ内の静的ファイルです: (注: このファイルは自分で作成する必要がある場合があります)
   // これを static の下に置く理由は、静的ファイル リソースを保存するためです。つまり、ローカル サーバーのアドレスを入力し、ブラウザーからファイル名を追加することでアクセスできます。String path = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/img/logo/";

   // このメソッドはファイルを書き込むためのラッパーです。util クラスでは、パッケージをインポートして使用します。メソッドは後で説明します。try {
    FileUtil.fileupload(file.getBytes(), パス, ファイル名);
    // 次に、対応するエンティティ クラスを作成し、次のパスを追加して、データベース操作メソッドを通じて User を書き込みます。user = sessionUtil.getSessionUser();
    ユーザー.setLogo(DbPath を保存);
    ユーザー whereUser = new User();
    ここでUser.setId(user.getId());
    ConfigHelper.update(user, "user", whereUser);
    Map<String, Object> map = new HashMap<>();
    map.put("msg", "アバターが正常に変更されました");
    map.put("データ", ユーザー);
    ResultData.ok(map) を返します。
   } キャッチ (IOException e) {
    log.error("画像アップロード ==》" + e.getMessage());
    e.printStackTrace();
    ResultData.failed(e.getMessage()); を返します。
   } キャッチ (例外 e) {
    log.error("最後の画像 ==》" + e.getMessage());
    e.printStackTrace();
    ResultData.failed(e.getMessage()); を返します。
   }

  } それ以外 {
   ResultData.failed("画像のアップロードに失敗しました"); を返します。
  }
 }