VueはOSSを使用して画像や添付ファイルをアップロードします

VueはOSSを使用して画像や添付ファイルをアップロードします

OSS を使用して Vue プロジェクトに画像や添付ファイルをアップロードする

ここでは、写真のアップロードと添付ファイルのアップロードに違いはなく、アップロードのプロセスは同じです。

1. 新しい oss.js ファイルを作成し、oss をカプセル化して使用します (ali-oss パッケージをインストールする必要があります)

const OSS = require('ali-oss')

定数OSSConfig = {
  uploadHost: 'http://xxxxx.oss-cn-shenzhen.aliyuncs.com', //OSSアップロードアドレスossParams: {
    地域: 'oss-cn-shenzhen',
    success_action_status: '200', // デフォルトは 200
    アクセスキーID: 'LTxxxxxxxxxxxxxxxvnkD',
    アクセスキーシークレット: 'J6xxxxxxxxxxxxxxxxiuv',
    バケット: 'xxxxxxxx-czx'、
  },
}

関数 random_string(len) {
  長さ = 長さ || 32
  var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  var maxPos = 文字数.長さ
  var pwd = ''
  (i = 0; i < len; i++) の場合 {
    pwd += chars.charAt(Math.floor(Math.random() * maxPos))
  }
  パスワードを返す
}

関数 uploadOSS(ファイル) {
  新しい Promise(async (resolve, reject) => { を返します。
    const ファイル名 = `${ランダム文字列(6)}_${ファイル名}`
    クライアント = 新しいOSS({
      リージョン: OSSConfig.ossParams.region、
      アクセスキーID: OSSConfig.ossParams.accessKeyId、
      アクセスキーシークレット: OSSConfig.ossParams.accessKeySecret、
      バケット: OSSConfig.ossParams.bucket、
    })
    const res = client.multipartUpload(ファイル名、ファイル) を待機します。
    // 解決(res)
    // または次のように返します:
    解決する({
        ファイル URL: `${OSSConfig.uploadHost}/${fileName}`,
        ファイル名: ファイル名
    })
  })
}

エクスポート { uploadOSS }

2. ページでoss.jsを使用する

これは、elementUI アップロード コンポーネントの 2 次カプセル化です。コンポーネント アクションは画像や添付ファイルのアップロードには使用されませんが、OSS アップロード メソッドが使用されます。

<テンプレート>
  <div class="ファイルのアップロード">
    <el-アップロード
      ref="ファイルアップロード"
      アクション=""
      :headers="アップロードプロパティのヘッダー"
      リストタイプ="絵カード"
      :ファイルリストを表示="false"
      :http-request="fnアップロードリクエスト"
      :on-success="ハンドル成功"
      :on-error="エラー処理"
      :before-upload="handleUpload"
    >
      <スロット></スロット>
    </el-アップロード>
  </div>
</テンプレート>

<スクリプト>
"@/utils/auth" から { getAccessToken、getRefreshToken、getAccessTokenTTL } をインポートします。
'@/utils/oss' から { uploadOSS } をインポートします。

エクスポートデフォルト{
  名前: "インデックス",
  データ() {
    戻る {};
  },
  計算: {
    ユーザーアカウントID() {
      this.$store.state.user.userAccountID を返します。
    },
    アップロードプロパティ() {
      戻る {
        // アクション: `${process.env.VUE_APP_BASE_API}/api/file/upload`,
        ヘッダー: {
          // インターフェースにはトークンが必要な場合があります: "",
          認証: getAccessToken(),
        },
        データ: {}、
      };
    },
  },
  メソッド: {
    handleExceed(ファイル、ファイルリスト){
      // console.log(ファイル、ファイルリスト);
      this.$message.error('アップロードに失敗しました。アップロードできるファイルは 10 ファイルまでに制限してください。');
    },
    handleUpload(ファイル、ファイルリスト){
      // console.log(ファイル、ファイルリスト);
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'docx' || testmsg === 'doc'
        || testmsg === 'pdf' || testmsg === 'zip' || testmsg === 'rar' || testmsg === 'ppt' || testmsg === 'txt'

      定数isLimit10M = ファイルサイズ / 1024 / 1024 < 10
      var ブール値 = false;
      if(拡張子 && isLimit10M){
        ブール値 = true;
      } それ以外 {
        ブール値 = false;
      }
      if(!拡張子) {
        this.$message.error('添付ファイルの種類を選択してください!');
        ブール値を返します。
      }
      if(!isLimit10M) {
        this.$message.error('アップロードに失敗しました。10Mを超えることはできません!');
        ブール値を返します。
      }
      ブール値を返します。
    },
    ハンドル成功(res) {
      // コンソールログ(res);
      もし(res){
        this.$emit('fileData', res)
        this.$message.success("添付ファイルが正常にアップロードされました!");
      }
    },
    ハンドルエラー(err){
      this.$message.error('添付ファイルのアップロードに失敗しました!');
    },
    // 画像をアップロード async fnUploadRequest(options) {
      試す {
        // console.log(オプション);
        let file = options.file; // ファイルを取得する
        res = await uploadOSS(ファイル) とします。
        コンソールログ(res);
        //データを返します this.$emit("fileData", res);
        this.$message.success("添付ファイルが正常にアップロードされました!");
      } キャッチ (e) {
        this.$message.error('添付ファイルのアップロードに失敗しました!');
      }
    },
  },
};
</スクリプト>

<style lang="scss" スコープ>
::v-deep .el-アップロード、
.el-upload--画像カード{
  // 幅: 50px;
  高さ: 0px;
  境界線: なし;
  行の高さ: 0;
  表示: ブロック;
  背景: #f5f6fb;
}
.el-アップロード{
  幅: 50px;
}
.img-続き{
  幅: 50px;
  高さ: 24px;
  背景: #f5f6fb;
  .imgアイコン{
    色: #ccc;
  }
  .img-テキスト {
    フォントサイズ: 12px;
    高さ: 24px;
    色: #000;
  }
}
</スタイル>

カプセル化されたアップロードコンポーネントを使用する

  	<div class="タスクの詳細pr">
        <el-form-item label="報告理由" prop="taskDesc" 必須>
          <div class="flex-center アップロード位置">
            <ImgUpload @imgData="imgData" />
            <FileUpload クラス="ml10" @fileData="fileData" />
          </div>
          <el-入力
            タイプ="テキストエリア"
            v-model="ruleForm.taskDesc"
            placeholder="報告の理由を入力してください"
            最大長 = "200"
            @input="checkiptTaskDesc()"
          </el-input> ...
          <div class="ipt-taskDesc-length">{{checkIptTaskDescLen}}/200</div>
          <div class="img-list mt10 flex">
            <ImgZoomIn :imagesList="画像リスト" @deleteImg="deleteImg"></ImgZoomIn>
          </div>
          <div class="dotted-line" v-if="imagesList.length > 0 && filesList.length > 0"></div>
          <div class="ファイルアイテム">
            <HandleFile :filesList="ファイルリスト" @deleteFile="削除ファイル"></HandleFile>
          </div>
        </el-form-item>
      </div>

ここに画像の説明を挿入

効果は以下のとおりです

ここに画像の説明を挿入

これで、vue が OSS を使用して画像や添付ファイルをアップロードする方法についての説明は終わりです。vue が OSS を使用して画像や添付ファイルをアップロードする方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します
  • ファイルアップロード機能を実現するVue Element UI + OSS
  • Vue.js を使用して Alibaba Cloud OSS ストレージに画像をアップロードする方法の例
  • VueでOSSに画像をアップロードする方法の例(画像には削除機能があります)
  • VueページでAli OSSアップロード機能を使用する例(パート2)
  • VueページでAli OSSアップロード機能を使用する例(I)

<<:  MySQLの複合インデックス方式の詳細な説明

>>:  クラウドサーバーを購入し、Alibaba Cloud に Pagoda Panel をインストールする手順

推薦する

フレックスレイアウトにおけるflex-growとflex-shrinkの計算方法の詳しい説明

CSS のFlex(彈性布局)すると、Web ページのレイアウトを柔軟に制御できます。Flex Fl...

スーパーバイザーによるDockerfileのマルチサービスイメージパッケージ操作

Dockerfileの作成yumソースを設定する cd /tmp/docker vim Docker...

Dockerfile を使用して nginx イメージを構築する例

Dockerfile の紹介Docker は、Dockerfile の内容を読み取ってイメージを自動...

主軸上のFlex子要素の比率を制御する方法

背景フレックス レイアウトにより、配置とスペースの割り当てがより効果的に実現されます。最近、flex...

Vueモバイル端末は左スライド編集と削除の全プロセスを実現します

序文プロジェクトのニーズに応じて、Vue-touch を使用して、vue モバイル端末の左スワイプ編...

数十億のデータに対するMySQLページングの最適化に関する簡単な説明

目次背景分析するデータシミュレーション1. 従業員テーブルと部門テーブルの2つのテーブルを作成します...

MySQL を使用してポート 3306 を開いたり変更したり、Ubuntu/Linux 環境でアクセス許可を開く

オペレーティングシステム: Ubuntu 17.04 64ビットMySQL バージョン: MySQL...

MySQL データベースのインデックス順序の詳細な説明

目次事件の原因解剖学ファイルの並べ替えファイルのソートが非常に遅いのですが、他に解決策はありますか?...

Ubuntu 20.04 中国語入力方法のインストール手順

この記事では、Google 入力方法をインストールします。実は以前はSogou入力方式を使っていたの...

MySQL初心者のための基本操作のまとめ

図書館運営クエリ1.SHOW DATABASE; ----すべてのデータベースを照会する2. SHO...

Flinkのフォールトトレラントメカニズムに関する簡単な説明:ジョブ実行とデーモン

目次1. ジョブ実行のフォールトトレランス1.1 タスクフェイルオーバー戦略1.2 ジョブ再開戦略2...

テーブルリストを破棄するには、標準のdl、dt、ddタグを使用します。

現在、ますます多くのフロントエンド開発者が、元のテーブル レイアウトを xHTML + CSS に置...

Linux カーネル デバイス ドライバー仮想ファイル システムに関する注意事項

/******************** * 仮想ファイルシステム VFS **********...

docker+devpi を使用してローカル pypi ソースをビルドする方法

以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...

vue-router からのフロントエンドルーティングの 2 つの実装

目次モードパラメータハッシュ履歴ハッシュ履歴.push()ハッシュ履歴.replace()アドレスバ...