vue Alibaba Cloud アップロード コンポーネントの詳細な説明

この記事では、Web 直接送信を使用して Vue プロジェクトに Alibaba Cloud OSS イメージをアップロードする方法を主に紹介します。デフォルトでは、読者は Vue フレームワークと Alibaba Cloud OSS をある程度理解しています。全体的なプロセスは Alibaba Cloud SDK をロードすることです。 > アップロード クライアントの初期化 -> アップロードするファイルの選択 -> 使用中に次のような落とし穴がありました:

1. js 導入の形式、使用 npm 形式の SDK にはいくつかのバックエンド ノード機能が必要であり、直接 Web 送信には使用できません。

スクリプトタグをhtmlに直接追加できます

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>

コンポーネント内にSDKを非同期で取得するメソッドであるLoadJSをパッケージ化しましたので、興味のある方はご覧ください

2.クライアントの初期化時に SDK がロードされない可能性があります。vue のマウントされたフック関数でタイマーを設定し、SDK がロードされた後にクライアントを初期化します

let timer = setInterval(() => {
  if (window.OSS) {
    this.init()
    clearInterval(timer)
    timer = null
    this.debug && window.console.log('阿里云oss初始化完成')
  } else {
    this.debug && window.console.log('阿里云oss初始化中...')
  }
}, 500)

3。 https 環境では、クライアントの初期化時に secure が true に設定されていることを確認する必要があります。そうしないと、ファイルをアップロードできません

4. デフォルトでは、保存された画像の名前はランダムな文字列になりますが、同じ画像の場合は、画像の場合は、画像のサイズ、高さ、幅を文字列に結合し、その文字列を md5 でハッシュするだけです。複数回アップロードすると 1 つの画像が保存されます

関連の推奨:

アップロード コンポーネントのコア アーキテクチャ設計についての簡単な説明

php マルチファイル アップロード コンポーネント_PHP チュートリアル

JS の使用方法コンポーネント ファイルをアップロードカスタム テンプレート_JavaScript スキルをアップロードします

以上がvue Alibaba Cloud アップロード コンポーネントの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。