vue写真カットアップロードコンポーネントの実現

まず全体の効果を見てみます。
アップロードファイルはサイズとタイプの制限をしていますが、動画には表示されません。

fileタイプのinputを使って、ローカルファイルの選択を実現します。
しかし、ブラウザのオリジナルファイルのアップロードボタンの顔が気に入らないです。そして、ボタンの文字は変えられません。このアップロードファイルのボタンを改造したいです。

方法1：Label要素を使用して、隠しfileタイプのinput要素をトリガする。短所：多くの人が開発する時、重複する元素idが現れるかもしれません。予想しにくいbugを招くかもしれません。

<input type="file" id='up_file_input' v-show='false' >
<label for='up_file_input'></label>

方法2：または、このlabel要素のclickイベント関数において、ファイルアップロードボタンのclickイベントを手動でトリガする。

<input type="file" v-show='false' ref="inputFileUp" >
<label @click='$refs.inputFileUp.click()'></label>

inputのchangeイベントを使用して選択したローカル画像を取得し、検証する。
アップロードされた画像の検証規則と提示語は、親コンポーネントからサブアセンブリにプロップされ、フォーマットは以下の通りです。

const img_valit = {
 type: /^.*\.(jpg|png|jpeg)$/i, //       
 type_error_msg: '          jpg    png   !',
 size: 3, //       
 size_error_msg: '           3MB'
}

ここで注意したいのですが、アップロードボタンのclickイベントでは、このファイルタイプの入力ボックスの値を手動でクリアし、前回と同じファイルを選択した後、changeイベントをトリガできない問題を解決します。

function fileInputClick(event) {
  event.target.value = "";
}
function coverImgChange(event) {
   const file = event.target.files[0];
   //                  originalFile           
   this.$options._myOpt.originalFile = file;
   //           
   const { type, size, type_error_msg, size_error_msg } = this.img_valit;
   //            
   const isJPG_PNG = type.test(file.name), isLt5M = file.size / 1024 / 1024 <= size;
   !isLt5M && this.$message.error(size_error_msg);
   !isJPG_PNG && this.$message.error(type_error_msg);
   //       ,      
   if (isJPG_PNG && isLt5M) {
    this.cropImgUrl = window.URL.createObjectURL(file);
    this.dialogVisible = true;
   }
  }

弾戸を開けて画像を切り取ります。
弾き窓に使われるElement-UIの弾き窓は、画像裁断がサードパーティプラグインvue-cropperです。画像トリミングプラグインのいくつかの構成は、プラグイン公式文書を参照することができ、以下のコードには、構成部分のコードが省略されている。

<el-dialog :visible.sync="dialogVisible" width='800px' title="    ">
   <div class="dialog-content">
    <div class="cropper-image">
     <vue-cropper
      ref="cropper"
      :img="cropImgUrl"
      @realTime="realTime"
     ></vue-cropper>
    </div>
    <!--           -->
    <div class="preview-wrapper">
     <div
      class="show-preview"
      :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}"
     >
      <div :style="previews.div">
       <img :src="previews.url" class="preview_img" :style="[previews.img]">
      </div>
     </div>
     <p class="preview-text">      </p>
    </div>
   </div>
   <div slot="footer" class="dialog-footer">
    <button @click="dialogEsc()">   </button>
    <button @click="dialogSure()">   </button>
   </div>
  </el-dialog>

画像のアップロード要求をサーバに送信します。
アップロードファイルインターフェースで、バックグラウンドに要求を送るパラメータは、ファイル自体、ファイル名です。

function realTime(data) {
  this.previews = data;
}
//               
function dialogSure() {
   const ajaxConfig = {
    headers: {
     "Content-Type": "multipart/form-data"
    }
   };
   //         
   let cropFileName =
    this.$options._myOpt.originalFile.name.match(/([^\/]+)(?=\.)/gi)[0] ||
    Date.now().toString();
   this.$refs.cropper.getCropBlob(blob => {
   // IE   Edge     File     
    let cropFile = new File(
     [blob],
     cropFileName.toString() + "." + (this.cropperConfig.outputType || "jpg"),
     { type: blob.type }
    );
    let upParams = new FormData();
    upParams.append("image", cropFile);
    upParams.append("filename", cropFile.fileName);
    axios.post(this.up_action, upParams).then(({ data }) => {
     if (data.status === 0) {
      this.coverUlr = window.URL.createObjectURL(blob);
      this.pathToParent({
       fileId: data.result.fileId,
       fileExt: data.result.fileExt
      });
     } else {
      this.coverUlr = "";
      this.pathToParent({
       fileId: "",
       fileExt: ""
      });
     }
    });
   });
   this.dialogVisible = false;
  }
  //                      
  function pathToParent(filePath) {
   this.$emit("getFilePath", filePath);
  }

以上がvue画像のカットアップロードコンポーネントの実現の詳細です。vue画像のカットアップロードコンポーネントに関する資料は他の関連記事に注目してください。