Vue.jsクラウドストレージで画像アップロード機能を実現

npm i cos-js-sdk-v5 --save

<テンプレート>
  <div>
    <el-アップロード
      リストタイプ="絵カード"
      :limit="4"
      アクション="#"
      :file-list="ファイルリスト"
      :on-preview="プレビュー"
      :http-request="アップロード"
      :on-change="変更"
      :before-upload="アップロード前"
      :accept="typeList"
      :on-remove="ハンドル削除"
    >
      <i class="el-icon-plus" />
    </el-アップロード>
    <el-進捗状況
      v-if="表示パーセント"
      スタイル="幅: 180px"
      :percentage="パーセント"
    />
    <el-dialog title="画像" :visible.sync="showDialog">
      <img :src="imgUrl" style="width: 100%" alt="" />
    </el-ダイアログ>
  </div>
</テンプレート>
<スクリプト>
'cos-js-sdk-v5' から COS をインポートします。
定数cos = 新しいCOS({
  SecretId: 'xxx', // シークレット ID
  SecretKey: 'xxx' // 秘密鍵
}) // インスタンス化されたパッケージはアップロード機能があり、アカウントのストレージバケットにアップロードできます export default {
  データ（） {
    戻る {
      fileList: [], // 画像アドレスを配列に設定する showDialog: false, // ポップアップレイヤーの表示を制御する imgUrl: '',
      現在のイメージUid: null、
      タイプリスト: 'image/*',
      showPercent: false, // 進行状況バーを表示するかどうか percent: 0 // アップロードの進行状況}
  },
  メソッド: {
    プレビュー(ファイル) {
      this.imgUrl = ファイル.url
      this.showDialog = true
    },
    beforeUpload(ファイル) {
      // アップロードできるファイルの種類 const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!types.includes(file.type)) {
        this.$message.error('アップロードできる画像は JPG、GIF、BMP、または PNG 形式のみです!')
        false を返す // false を返すと、画像はアップロードされません}
      定数maxSize = 1024 * 1024
      ファイルサイズが最大サイズより大きい場合
        this.$message.error('画像の最大サイズは 1M を超えることはできません')
        偽を返す
      }
      this.currentImageUid = ファイル.uid
      this.showPercent = true
      真を返す
    },
    アップロード(パラメータ) {
      // console.log(パラメータ.ファイル)
      if (params.file) {
        // アップロード操作を実行する cos.putObject({
          Bucket: 'xxx', // ストレージバケット Region: 'ap-nanjing', // リージョンキー: params.file.name, // ファイル名 Body: params.file, // アップロードするファイルオブジェクト StorageClass: 'STANDARD', // アップロードモードタイプはデフォルトで標準モードに直接設定できます onProgress: (progressData) => {
            this.percent = 進捗データ.percent * 100
          }
        }, (エラー、データ) => {
          // データが返された後の処理方法 if (err) return
          this.fileList = this.fileList.map(item => {
            if (item.uid === this.currentImageUid) {
              戻り値: { url: 'http://' + data.Location, name: item.name }
            }
            返品商品
          })
          // コンソール.log(this.fileList)
        })
      }
    },
    handleRemove(ファイル、ファイルリスト) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      // console.log(ファイル)
      cos.deleteObject({
        バケット: 'xxx'、/* 必須*/
        地域: 'ap-nanjing'、/* バケットが配置されている地域、必須フィールド*/
        キー: file.name /* 必須*/
      }, (エラー、データ) => {
        // console.log(エラー || データ)
      })
    },
    変更(ファイル、ファイルリスト) {
      this.fileList = ファイルリスト
    }
  }
}
</スクリプト>

<テンプレート>
  <div class="アプリコンテナ">
    <el-card>
      <el-タブ>
        <el-tab-pane label="個人情報">
          <ユーザー情報 />
        </el-tab-pane>
        <el-tab-pane label="パスワードのリセット">
          <!-- フォームを配置します -->
          <el-フォーム
            ラベル幅="120px"
            スタイル="margin-left: 120px; margin-top: 30px"
          >
            <el-form-item label="パスワード:">
              <el-input style="width: 300px" type="password" />
            </el-form-item>
            <el-form-item label="パスワードの確認:">
              <el-input style="width: 300px" type="password" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary">リセット</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="部門情報">
          <部門 />
        </el-tab-pane>
        <el-tab-pane label="アバターを選択">
          <画像アップロード />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</テンプレート>
<スクリプト>
'./component/Userinfo' から userInfo をインポートします。
'./component/Department' から部門をインポートします。
'@/components/ImagUpload' から imageUpload をインポートします。

エクスポートデフォルト（{
  コンポーネント:
   'ユーザー情報': ユーザー情報、
   '部門': 部門、
   '画像アップロード': 画像のアップロード
  },
  // 
    メソッド: {
    アップロード(e) {
      定数ファイル = e.target.files[0]
      const リーダー = 新しい FileReader()
      reader.readAsDataURL(ファイル)
      reader.onload = 非同期関数 (e) {
        アップロードを待つ({
          ファイル： {
            元の名前: '11.jpg',
            ファイル: e.target.result
          }
        })
      }
    }
  }

})
</スクリプト>

'@/layout' からレイアウトをインポートします
エクスポートデフォルト{
  パス: '/user',
  コンポーネント: レイアウト、
  子供たち： [{
    パス: 'インデックス',
    コンポーネント: () => import('@/views/user/index'),
    名前: 'ユーザー',
    メタ: {
      タイトル:「ユーザー管理」
      アイコン: 'アカウント'
    }
  },
  {
    パス: '詳細',
    コンポーネント: () => import('@/views/user/detail'),
    名前: '詳細',
    非表示: true、
    メタ: {
      タイトル: 「ユーザーの詳細」
      アイコン: 'アカウント'
    }
  }]
}