Vueコンポーネントは、写真やビデオをアップロードするためのサンプルコードをカプセル化します

<!--UploadImageVideo を分割してアップロード-->
<テンプレート>
  <div class="画像ビデオをアップロード">
    <el-アップロード
      アクション
      :on-change="変更処理"
      :on-remove="ハンドル削除"
      :limit="制限ファイル数"
      :on-exceed="ハンドル超過"
      :file-list="_ファイルリスト"
      :http-request="HttpRequest を処理する"
      :before-upload="アップロード前の処理"
      :multiple="複数"
    >
      <el-button slot="trigger" size="small" type="primary">ファイルを選択</el-button>
      <div slot="tip" class="el-upload__tip">{{ ヒント }}</div>
    </el-アップロード>
 
    <el-ダイアログ
      title="アップロードの進行状況"
      :visible.sync="ダイアログテーブルを表示"
      :クリック時に閉じるモーダル="false"
      :modal-append-to-body="false"
    >
      <el-progress :text-inside="true" :stroke-width="26" :percentage="パーセント"></el-progress>
    </el-ダイアログ>
  </div>
</テンプレート>
 
<スクリプト>
「vue-uuid」から { uuid } をインポートします。
OSS は、 OSS のサブクラスです。
 
エクスポートデフォルト{
  名前： ""、
  コンポーネント: {},
  小道具: {
    地域：
      タイプ: 文字列、
      デフォルト: "oss-cn-chengdu"
    },
    アクセスキーID: {
      タイプ: 文字列、
      デフォルト: "xxx"
    },
    アクセスキーシークレット: {
      タイプ: 文字列、
      デフォルト: "xxx"
    },
    //保存場所バケット: {
      タイプ: 文字列、
      必須: true
    },
    現在のURL: {
      タイプ: 配列、
      デフォルト: () => [],
      必須: true
    },
    //アップロードできるファイルの数を制限する limitFileNumber: {
      タイプ: 数値、
      デフォルト: 1
    },
    //複数選択をサポートするかどうか isMultiple: {
      タイプ: ブール値、
      デフォルト: false
    },
    //ファイル形式 fileType: {
      タイプ: 文字列、
      デフォルト： ""
    },
    //ヒント： {
      タイプ: 文字列
    }
  },
  データ（） {
    戻る {
      クライアント: 新しいOSS({
        地域: this.region、
        アクセスキーID: this.accessKeyId、
        アクセスキーシークレット: this.accessKeySecret、
        バケット: this.bucket
      }）、
      パーセンテージ: 0,
      ダイアログテーブル表示: false、
      ファイルリスト: []
    };
  },
  計算: {
    //注: 計算されたプロパティに出力するために console.log() を使用する場合は注意してください。出力された変数が特定のプロパティに依存し、計算されたプロパティが繰り返し呼び出される可能性があるためです。 ！ ！ ！ ！ ！
    _fileList() {
      定数arr = [];
      // this.currentUrls が空でないことを確認してください。空でない場合はエラーが報告されます。if (this.currentUrls.length !== 0) {
        for (this.currentUrls の定数項目) {
          { パス名 } = 新しい URL(item);
          arr.push({ name: decodeURIComponent(パス名), url: item });
        }
      }
 
      this.fileList = arr; //このコード行は非常に重要です。 ！
      arr を返します。
    }
  },
  作成された() {},
  マウント() {},
  メソッド: {
    ハンドル変更(ファイル、ファイルリスト) {
      this.fileList = ファイルリスト;
    },
    handleRemove(ファイル、ファイルリスト) {
      this.fileList = ファイルリスト;
    },
    handleExceed(ファイル、ファイルリスト) {
      this.$message.warning(
        `現在、選択範囲は ${this.limitFileNumber} ファイルに制限されています。今回は ${ を選択しました。
          ファイルの長さ
        } ファイル、${files.length + fileList.length} ファイルが選択されました`
      );
    },
 
    //注: カスタムアップロード handleHttpRequest を有効にするには、次の条件を満たす必要があります。
    // 1. auto-upload='true' に設定するか、この属性はデフォルトで true になるため記述しないでください。 2. action='#' に設定するか、アクションを直接記述してください。
    handleHttpRequest(ファイル) {
      //内容はないですが、この機能は必須です！
    },
    //注: カスタムアップロードの handleHttpRequest は、アップロード前のフック関数 handleBeforeUpload(file) をトリガーするために有効である必要があります。
      if (this.fileType == "画像") {
        { タイプ、サイズ、名前 } = ファイルとします。
        isJPEG = type === "image/jpeg" とします。
        isJPG = type === "image/jpg" とします。
        isPNG = type === "image/png" とします。
        isLt5M = サイズ / 1024 / 1024 < 5 とします。
        （！isJPEG && ！isJPG && ！isPNG）の場合{
          this.$message.error("アップロードできる画像は JPEG/JPG/PNG 形式のみです!");
          false を返します。
        }
        もし (!isLt5M) {
          this.$message.error("1 つの画像のサイズは 5MB を超えることはできません!");
          false を返します。
        }
      }
      if (this.fileType == "ビデオ") {
        { タイプ、サイズ、名前 } = ファイルとします。
        isMP4 = type === "video/mp4" とします。
        isLt50M = サイズ / 1024 / 1024 < 50 とします。
        (!isMP4) の場合 {
          this.$message.error("アップロードできる動画は MP4 形式のみです!");
          false を返します。
        }
        もし (!isLt50M) {
          this.$message.error("1 つのビデオのサイズは 50MB を超えることはできません!");
          false を返します。
        }
      }
    },
    // データを分割してアップロードし、進行状況バーを表示します。名前を変更したファイルを alioss にアップロードし、単一のファイル URL 文字列を返します。中国語のファイル名をサポートします。async UploadImageVideo(filename, file) {
      新しいファイル名 =
        ファイル名.split(".")[0] + "-" + uuid.v1() + "." + ファイル名.split(".")[1];
      that = this とする;
      that.dialogTableVisible = true;
 
      させて {
        res: { リクエストURL }
      } = this.client.multipartUpload(newFileName, ファイル, { を待機します
        進捗: 関数(p, チェックポイント) {
          that.percentage = parseFloat((p * 100).toFixed(2));
        }
      });
      （そのパーセンテージ == 100）の場合{
        that.dialogTableVisible = false;
      }
      { origin, pathname } = new URL(requestUrls[0]) とします。
      origin + decodeURIComponent(pathname) を返します。
    },
    // ファイルを一括アップロードします。正常にアップロードされたURLの配列を返します。async addFiles() {
      URLを[]とします。
      if (this.fileList.length !== 0) {
        for (this.fileListのconst項目) {
          {名前、生データ} = 項目とします。
          pathname = this.UploadImageVideo(name, raw); を待機します。
          urls.push(パス名);
        }
      }
      URLを返します。
    },
    //ファイルデータを更新します。新しいデータをサーバーにアップロードし、サーバー内の古いデータを削除し、更新された URL 配列を返します。async UpdateFiles() {
      let arr_newUploaded = []; //新しくアップロードされた画像のURL。
      let arr_original = []; // 元の画像のURL。削除する必要はありません。let arr_delete = []; //削除する画像のURL。
      if (this.fileList.length !== 0) {
        this.fileList の (const { raw, name, url }) {
          //注: ここで raw が存在するかどうかを判断することが重要です。存在する場合は新しくアップロードされたもの、存在しない場合はオリジナルであることを意味します if (raw) {
            pathname = this.UploadImageVideo(name, raw); を待機します。
            arr_newUploaded.push(パス名);
          }
          if (this.currentUrls.includes(url)) {
            arr_original.push(url);
          }
        }
      }
 
      for (this.currentUrls の const 要素) {
        要素が含まれている場合
          arr_delete.push(要素);
        }
      }
      this.deleteMultiFiles(arr_delete) を待機します。
 
      [...arr_original、...arr_newUploaded] を返します。
    },
    // サーバー内のファイルを一括削除します。パラメータ: サーバーから削除するファイルの URL の配列。
    非同期で複数のファイルを削除します(urls = []) {
      arr_pathname = [] とします。
      urls.length が 0 の場合
        for (URLのconst項目) {
          // 使用しないでください。let url=require("url");url.parse(); は無効です。新しいURLを使用するには()
          { パス名 } = 新しい URL(item);
          // decodeURIComponent() 関数は中国語の文字化けした文字を中国語に変換します arr_pathname.push(decodeURIComponent(pathname));
        }
        // サーバー内の画像を削除します。await this.client.deleteMulti(arr_pathname);
      }
    }
  },
  時計： {}
};
</スクリプト>
 
<style lang="scss" スコープ>
.画像ビデオをアップロード{
  /*アップロードコンポーネントの遷移効果を削除します*/
  ::v-deep .el-アップロードリスト__item {
    遷移: なし !important;
  }
}
</スタイル>

<画像動画をアップロード
  ref="ref_UploadImageVideo"
  バケット="xxx"
  :currentUrls="formData.imgurl"
  :limitFileNumber="3"
  tip="1. 最大 3 枚の写真をアップロードできます。2. アップロードできる写真は JPEG/JPG/PNG 形式のみです。3. 1 枚の写真のサイズは 5MB を超えることはできません。"
  ファイルタイプ="画像"
  :isMultiple="true"
</画像動画をアップロード>

<!--ユーザー管理-->
<テンプレート>
  <div class="userManage">
    <el-card>
      <div style="margin-bottom: 10px">
        <el-入力
          v-model="検索名"
          クリア可能
          placeholder="検索するユーザー名を入力してください"
          スタイル="幅: 200px; 右余白: 10px"
        />
        <el-ボタン
          サイズ="ミニ"
          タイプ="成功"
          アイコン="el-icon-search"
          @click="検索ユーザー(検索名)"
        >検索</el-button>
        <el-ボタン
          サイズ="ミニ"
          タイプ="警告"
          アイコン="el-icon-refresh-left"
          @click="検索名 = ''"
        >リセット</el-button>
        <el-button sizi="mini" @click="handleAdd()" type="primary" icon="el-icon-plus">追加</el-button>
        <el-button @click="getUserList()" sizi="mini" icon="el-icon-refresh" style="float: right">更新</el-button>
      </div>
      <el-table :data="テーブルデータ" ボーダー v-loading="読み込み中">
        <el-table-column label="ユーザー名" prop="ユーザー名" align="center" width="150px"></el-table-column>
        <el-table-column label="パスワード" prop="パスワード" align="center"></el-table-column>
        <el-table-column label="picture" align="center">
          <テンプレート スロット スコープ="スコープ">
            <div
              スタイル="
                ディスプレイ: フレックス;
                コンテンツの両端揃え: スペースを空ける;
                flex-flow: 行折り返し;
              「
            >
              <el-image
                スタイル="幅: 50px; 高さ: 50px"
                v-for="(item, index) スコープ内の行.imgurl"
                :key="インデックス"
                :src="アイテム"
                :preview-src-list="scope.row.imgurl"
              </el-image>
              <!-- <a :href="scope.row.imgurl" rel="external nofollow" target="_blank">{{scope.row.imgurl}}</a> -->
            </div>
          </テンプレート>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <テンプレート スロット スコープ="スコープ">
            <el-button size="mini" @click="showEditDialog(scope.row)">
              <i class="el-icon-edit" /> 編集</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
              <i class="el-icon-delete" /> 削除</el-button>
          </テンプレート>
        </el-table-column>
      </el-table>
    </el-card>
    <UserManageDialog :dialog="ダイアログ" :formData="フォームデータ" @addUser="ユーザーを追加" @editUser="ユーザーの編集"></UserManageDialog>
  </div>
</テンプレート>
 
<スクリプト>
「./userManageDialog.vue」からUserManageDialogをインポートします。
「@/utils/alioss.js」から { client_alioss、deleteMultiFiles } をインポートします。
 
輸入 {
  ユーザーの追加、
  ユーザーリストを取得、
  編集ユーザー、
  ユーザーを削除、
  検索ユーザー
} 「@/api/userManage/index」から;
エクスポートデフォルト{
  名前: "userManage",
  コンポーネント: { UserManageDialog },
  データ（） {
    戻る {
      検索名: "",
      isLoading: false、
      ダイアログ: {
        表示: 偽、
        タイトル： ""
      },
      フォームデータ: {},
      テーブルデータ: [
        {
          _id: "",
          ユーザー名: "admin",
          パスワード: "123",
          画像URL: []
        }
      ]、
      現在の画像: []
    };
  },
  プロパティ: {},
  作成された() {},
  マウント() {
    ユーザーリストを取得します。
  },
  計算: {},
  メソッド: {
    //ユーザーリストを取得する async getUserList() {
      this.isLoading = true;
      {データ} = getUserList() を待機します。
      テーブルデータ = データ.データ;
      this.isLoading = false;
    },
 
    //新しいユーザーウィンドウを開く handleAdd() {
      this.dialog = {
        表示: true、
        タイトル:「新規ユーザー」
        オプション: 「追加」
      };
      this.formData = {
        ユーザー名: "",
        パスワード: "",
        画像URL: []
      };
    },
    //ユーザー編集ウィンドウを開く showEditDialog(row) {
      this.currentImgs = row.imgurl;
 
      this.dialog = {
        表示: true、
        タイトル:「ユーザーを編集」
        オプション: 「編集」
      };
      this.formData = {
        _id: 行._id、
        ユーザー名: row.username、
        パスワード: row.password、
        imgurl: row.imgurl
      };
    },
    //新しいユーザーを追加する async addUser(urls) {
      this.formData.imgurl = URL;
 
      addUser(this.formData) を待機します。
      this.dialog.show = false;
      これを通知します。{
        タイトル: 「成功」、
        メッセージ:「ユーザーが正常に追加されました!」
        タイプ: 「成功」
      });
      ユーザーリストを取得します。
    },
    // ユーザーを編集 async editUser(urls) {
      this.formData.imgurl = urls;
 
      await editUser(this.formData, this.formData._id); //データベース、特に画像のURLを更新します
 
      this.dialog.show = false;
      これを通知します。{
        タイトル: 「成功」、
        メッセージ: "ユーザーの編集に成功しました!",
        タイプ: 「成功」
      });
      ユーザーリストを取得します。
    },
    //ユーザーを削除する handleDelete({ _id }) {
      this.$confirm("この操作によりファイルが完全に削除されます。続行しますか?", "Prompt", {
        confirmButtonText: "確認",
        cancelButtonText: 「キャンセル」、
        タイプ: 「警告」
      })
        .then(非同期() => {
          this.$メッセージ({
            タイプ: "成功",
            メッセージ:「正常に削除されました!」
            表示閉じる: true
          });
          させて {
            データ: {imgurl}
          } = deleteUser(_id); を待機します。
 
          //サーバー内のファイルを削除します。削除する URL 配列を渡します。await deleteMultiFiles(imgurl);
 
          ユーザーリストを取得します。
        })
        .catch(() => {
          this.$メッセージ({
            タイプ: "情報",
            メッセージ: 「削除されました」、
            表示閉じる: true
          });
        });
    },
    //ユーザー名によるクエリ async searchUser(searchName) {
      this.isLoading = true;
      {データ} = searchUserを待機します({
        検索名
      });
      テーブルデータ = データ.データ;
      this.isLoading = false;
    }
  },
  時計： {}
};
</スクリプト>
 
<style lang="scss" スコープ>
.userManage{
}
</スタイル> 

<!--userManageDialog -->
<テンプレート>
  <div class="userManageDialog">
    <el-dialog :title="dialog.title" width="45%" :visible.sync="dialog.show" v-if="dialog.show">
      <el-form ref="ref_form_userManage" :model="formData" :rules="ルール" label-width="100px">
        <el-form-item label="ユーザー名" prop="ユーザー名">
          <el-input v-model="formData.username" autocomplete="off" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="パスワード" prop="パスワード">
          <el-input v-model="formData.password" autocomplete="off" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item label="画像" prop="imgurl">
          <!-- fileType 属性が記述されていない場合は、写真とビデオの両方をアップロードできることを意味します。 fileType="image" は画像のみアップロードできることを意味します。 fileType="video" はビデオのみをアップロードできることを意味します -->
          <画像動画をアップロード
            ref="ref_UploadImageVideo"
            バケット="bucket-lijiang-test"
            :currentUrls="formData.imgurl"
            :limitFileNumber="3"
            tip="1. 最大 3 枚の写真をアップロードできます。2. アップロードできる写真は JPEG/JPG/PNG 形式のみです。3. 1 枚の写真のサイズは 5MB を超えることはできません。"
            ファイルタイプ="画像"
            :isMultiple="true"
          </画像動画をアップロード>
        </el-form-item>
      </el-form>
      <div スロット="フッター" クラス="ダイアログ フッター">
        <el-button @click="dialog.show = false">キャンセル</el-button>
        <el-ボタン
          v-if="dialog.option == '追加'"
          @click="addUser('ref_form_userManage')"
          タイプ="プライマリ"
        >OK</el-button>
        <el-ボタン
          v-if="dialog.option == '編集'"
          @click="editUser('ref_form_userManage')"
          タイプ="プライマリ"
        >OK</el-button>
      </div>
    </el-ダイアログ>
  </div>
</テンプレート>
 
<スクリプト>
「@/components/UploadImageVideo」からUploadImageVideoをインポートします。
 
エクスポートデフォルト{
  名前: "userManageDialog",
  コンポーネント: { UploadImageVideo },
  プロパティ: ["ダイアログ", "formData"],
  データ（） {
    戻る {
      ファイルリスト: [],
      ルール:
        ユーザー名: [
          { 必須: true、メッセージ: "ユーザー名を入力してください"、トリガー: "blur" }
        ]
      }
    };
  },
  作成された() {},
  マウント() {},
  計算: {},
  メソッド: {
    addUser(フォーム名) {
      this.$refs[formName].validate(非同期有効 => {
        （有効）の場合{
          urls = this.$refs["ref_UploadImageVideo"].addFiles() を待機します。
          this.$emit("addUser", urls);
        } それ以外 {
          console.log("送信エラー!!");
          false を返します。
        }
      });
    },
    editUser(フォーム名) {
      this.$refs[formName].validate(非同期有効 => {
        （有効）の場合{
          urls = this.$refs["ref_UploadImageVideo"].UpdateFiles() を待機します。
 
          this.$emit("editUser", urls);
        } それ以外 {
          console.log("送信エラー!!");
          false を返します。
        }
      });
    }
  },
  時計： {}
};
</スクリプト>
<style lang="scss" スコープ>
</スタイル> 

'vue-uuid' から { uuid } をインポートします。
OSS は、 OSS のサブクラスです。
 
クライアント = 新しいOSS({
    地域: "oss-cn-成都",
    アクセスキーID: "LTAI5tQPHvixV8aakp1vg8Jr",
    アクセスキーシークレット: "xYyToToPe8UFQMdt4hpTUS4PNxzl9S",
    バケット: "bucket-lijiang-test",
 
});
 
エクスポート const client_alioss = client;
 
 
//ファイル配列のエクスポートを削除する async function deleteMultiFiles(urls = []) {
    arr_pathname = [] とします。
    urls.length が 0 の場合
        for (URLのconst項目) {
            // 使用しないでください。let url=require("url");url.parse(); は無効です。新しいURLを使用するには()
            { パス名 } = 新しい URL(item);
            // decodeURIComponent() 関数は中国語の文字化けした文字を中国語に変換します arr_pathname.push(decodeURIComponent(pathname));
        }
        client.deleteMulti(arr_pathname) を待機します。
    }
} 

'@/utils/request' からリクエストをインポートします
// ユーザーリストを取得するエクスポート関数 getUserList() {
    リクエストを返す({
        URL: '/api/userManage',
        メソッド: 'get'
    })
}
 
// 新しいユーザーを追加するエクスポート関数 addUser(data) {
    リクエストを返す({
        URL: '/api/userManage',
        メソッド: 'post'、
        データ
    })
}
 
// ユーザーエクスポートの編集関数 editUser(data, _id) {
    リクエストを返す({
        URL: `/api/userManage/${_id}`,
        メソッド: 'put'、
        データ
    })
}
 
// ユーザーを削除するエクスポート関数 deleteUser(_id) {
    リクエストを返す({
        URL: `/api/userManage/${_id}`,
        メソッド: '削除'
    })
}
 
// キーワードによるクエリ export function searchUser(data) {
    リクエストを返す({
        url: `/api/userManage/search`,
        メソッド: 'get'、
        パラメータ: データ
    })
} 

const ルーター = require('koa-router')()
 
const User = require("../models/User"); //モジュールモデルを導入 router.prefix('/userManage')
 
//ユーザーリストを取得する router.get('/', async (ctx, next) => {
    データ = User.find({}) を待機します。
    ctx.body = {
        コード: 200、
        メッセージ: 「リクエストは成功しました」、
        データ、
    }
})
//新しいユーザーを追加 router.post('/', async (ctx, next) => {
    { ユーザー名、パスワード、imgurl } = ctx.request.body; とします。
    User.create({ ユーザー名, パスワード, imgurl }) を待機します。
    ctx.body = { コード: 200、メッセージ: "正常に追加されました" }
})
// ユーザーを編集 router.put('/:_id', async (ctx, next) => {
    { ユーザー名、パスワード、imgurl } = ctx.request.body; とします。
    {_id} = ctx.paramsとします
 
    User.findByIdAndUpdate(_id, { ユーザー名、パスワード、imgurl }) を待機します。
    ctx.body = { コード: 200、メッセージ: "編集に成功しました" }
})
// ユーザーを削除する router.delete('/:_id', async (ctx, next) => {
    {_id} = ctx.params;とします。
    {imgurl} = User.findByIdAndDelete(_id) を待機します。
    ctx.body = { コード: 200、メッセージ: "正常に削除されました"、imgurl }
 
})
 
// キーワードに基づいてユーザーを照会します。ファジークエリ router.get('/search', async (ctx, next) => {
    {searchName} = ctx.request.query; とします。
 
    data = await User.find({ username: { $regex: searchName } }) を実行します。
    ctx.body = { コード: 200、メッセージ: "クエリが成功しました"、データ }
})
module.exports = ルーター