Vue カプセル化コンポーネント アップロード画像コンポーネント

<テンプレート>
  <div>
    <el-form>
      <!-- :on-change="アップロードファイル" -->
      <el-アップロード
        :limit="limit" //アップロードできる最大数アクション
        accept="image/*" //アップロードを受け入れる:on-change="uploadFile" //ファイルの状態が変わったときの関数list-type="picture-card" //ファイルリストの種類:auto-upload="false" //ファイルを選択したらすぐにアップロードするかどうか:file-list="fileList" //仮想ファイル配列:on-exceed="handleExceed" //ファイル数が制限を超えたときの関数:on-preview="handlePictureCardPreview" //ファイルリストでアップロードしたファイルをクリックしたときの関数:on-remove="handleRemove" //ファイルリストからファイルを削除するときの関数ref="upload"
        クラス="アバターアップローダー"
        :class="{hide:showUpload}" // 最大制限に達した後にアップロード ボタンを非表示にするために使用されます: disabled="disabled" // アップロード失敗プロセスを表示するには>
        <i class="el-icon-plus"></i>
      </el-アップロード>
      //画像を表示 <el-dialog width="30%" :visible.sync="dialogVisible">
        <img width="100%" :src="imgUrl.url" alt />
      </el-ダイアログ>
      // 直接アップロードする必要はないが、ボタンをクリックして画像をアップロードする必要がある場合は、このメソッドを開いてください // 上記の el-upload タグの on-change を http-request メソッドに変更します<!-- <Button text="Upload" type="add_u" style="margin-top: 10px;" @click.native="submitUpload"></Button> -->
    </el-form>
  </div>
</テンプレート>

<スクリプト>
// アップロード画像インターフェースを導入する import { uploadImg } from "@/api/public/api";
エクスポートデフォルト{
  小道具: {
    制限: 数、
    ファイルリスト: 配列、
    無効: ブール値、
  },
  データ（） {
    戻る {
      showUpload: false, // 最大制限を制御した後、アップロードボタンを閉じます dialogVisible: false, // 画像のポップアップボックスを表示します imgUrl: [], // 画像をアップロードした後のアドレスの収集};
  },
  //アップロードされた写真の配列をリッスンします (自動レンダリングの問題と、変更時にアップロード ボタンが消える問題に対処するため)。
  時計：
    ファイルリスト(新しい名前、古い名前) {
      newName.length == this.limit の場合、 this.showUpload = true;
      それ以外の場合は this.showUpload = false;
    },
  },
  メソッド: {
    //ファイルリストからファイルを削除する関数 handleRemove(file, fileList) {
      const index = this.fileList.findIndex((item) => item === file.uid);
      this.imgUrl.splice(インデックス、1);
      this.$emit("delUrl", this.imgUrl);
      fileList.length < this.limit の場合、 this.showUpload = false;
    },
    //ファイルリストでアップロードされたファイルをクリックしたときの機能 handlePictureCardPreview(file) {
      this.imgUrl.url = ファイル.url;
      this.dialogVisible = true;
    },
    //これは直接アップロードするのではなく、ボタン経由でアップロードする方法です。submitUpload() {
      this.$refs.upload.submit();
    },
    //ファイルステータスが変化したときの機能（メインロジック機能）
    アップロードファイル(e, ファイルリスト) {
      // アップロード ボタンを非表示にするユーザー アップロードの最大数を判断 if (fileList.length >= this.limit) this.showUpload = true;
      // const file = e.file; <- ここでは直接アップロードする必要はなく、ボタンからアップロードします const file = e.raw; // <- ここでは直接アップロードされます // サイズ const size = file.size / 1024 / 1024 / 2;
      もし （
        !(
          ファイルタイプ === "image/png" ||
          ファイルタイプ === "image/gif" ||
          ファイルタイプ === "image/jpg" ||
          ファイルタイプ === "image/jpeg"
        ）
      ）{
        this.$notify.warning({
          タイトル: 「警告」、
          メッセージ：
            「image/png、image/gif、image/jpg、image/jpeg の形式で画像をアップロードしてください」
        });
      } そうでない場合 (サイズ > 2) {
        this.$notify.warning({
          タイトル: 「警告」、
          メッセージ:「画像サイズは2M未満でなければなりません」
        });
      } それ以外 {
        if (this.limit == 1) this.imgUrl = []; // 1つと判断する場合は、配列をクリアする必要があります const params = new FormData();
        params.append("ソース", ファイル);
        アップロードImg(params).then((res) => {
        //ここで返されるデータ構造（独自の戻り構造に応じて変更してください）
          （res.data.status === 1）の場合{
            this.$message.success("アップロードに成功しました");
            this.imgUrl = res.data;
            //親コンポーネント メソッドを呼び出して、画像パラメータを渡します。this.$emit("getUrl", this.imgUrl);
          } そうでない場合 this.$message.error("アップロードに失敗しました");
        });
      }
    },
    //ファイル数が制限を超えた場合の関数 handleExceed(files, fileList) {
      this.$message.info(`アップロードできる写真は ${this.limit} 枚のみです`);
    },
  },
};
</スクリプト>

//ここでアップロード前とアップロード後のスタイルを変更します（el-upload は見栄えが良くないので、自分で変更することもできます）
<スタイル スコープ>
.hide .el-upload--picture-card {
  表示: なし !重要;
}
.avatar-uploader > .el-upload {
  幅: 200ピクセル;
  高さ: 200px;
  行の高さ: 200px;
  境界線の半径: 0px;
  背景: #fff;
  境界線: 1px 破線 #ccc;
}
.avatar-uploader > .el-upload > i {
  フォントサイズ: 28px;
  色: #ccc;
}
.avatar-uploader > .el-upload-list {
  表示: ブロック;
}
.avatar-uploader > .el-upload-list > .el-upload-list__item {
  幅: 200ピクセル;
  高さ: 200px;
  表示: ブロック;
}
.avatar-uploader > .el-upload-list > .el-upload-list__item > img {
  幅: 200ピクセル;
  高さ: 200px;
  境界線の半径: 0px;
}
</スタイル>

//画像アップロードコンポーネント import UploadImg from "@/views/common/UploadImg.vue";
Vue.component('アップロード画像', アップロード画像)

<el-form-item label="写真をアップロード">
 //アップロードする画像の最大数を制限します //fileList 画像配列 //getUrl アップロードされたアドレスを取得します //delUrl アップロードされたアドレスを削除します // disabled 処理を無効にします <UploadImg :limit="1" :file-list="fileList" @getUrl="getUrl($event,'Parameters you need to carry')" @delUrl="delUrl($event,'Parameters you need to carry')" :disabled="true" />
</el-form-item>

//変数宣言データ:{
 ファイルリスト:[]
 }
//関数 getUrl(getUrl){
 コンソールログ(getUrl)
 };
delUrl(getUrl){
コンソールログ(getUrl)
};