VueはElement el-uploadコンポーネントを使用してピットに足を踏み入れます

VueはElement el-uploadコンポーネントを使用してピットに足を踏み入れます

1. 基本的な使い方

最近、el-uploadコンポーネントを勉強して、小さな落とし穴に陥りました。みんなが学べるように書き留めました

要素のコンポーネントを直接コピーして使用することは非常に一般的ですが、アップロード コンポーネントを使用する場合、落とし穴に遭遇します。

直接アップロードを使用すると、必ずこのエラーが発生します。

また、アップロードした写真が突然消えてしまうこともあります。このとき、インターフェースがなければ、なぜ削除されたのかわかりません。そのため、インターフェースがない場合は、クロスドメインエラーが原因で写真が消えたのではないかと推測することしかできません。

最後に、会社のアドレスを取得してインターフェイスを調整しました。答えは正解でした:action="https://jsonplaceholder.typicode.com/posts/"。これは要素のアクションパラメータです。htmlを使用するとajaxが呼び出され、同一生成元ポリシーが異なり、エラーが発生します。

通常、会社は画像を URL 形式に変換するためのアドレス リンクを提供します。それを呼び出して保存するだけです。ただし、トークンのアクセス許可が必要になる場合があります。このとき、めったに行われないことがあります。通常、トークンはコンポーネントを介して直接運ばれないため、トークンは el-upload コンポーネントを介して運ばれる必要があります。

 <el-アップロード
            action="https://xxxx アドレス"
            :headers="ヘッダーをインポート"
          >
   </el-アップロード>
 
'@/utils/token' から {getToken} をインポートします。
 
 
データ() {
    戻る {
      インポートヘッダー: {トークン: getToken()},
    };
  },

2. 画像量の制御

 <el-アップロード
            アクション="https://security.brofirst.cn/api/common/upload"
            :headers="ヘッダーをインポート"
            :limit="制限"
             :on-exceed="masterFileMax"
          >
            <i class="el-icon-plus"></i>
          </el-アップロード>
 
 
 
  // 最大何枚の写真をアップロードできるか masterFileMax(files, fileList) {
        console.log(ファイル、ファイルリスト);
        this.$message.warning(`最大 ${this.limit} 個のファイルをアップロードしてください。`);
    },

3. 画像形式の制限/複数の画像を選択可能

  <el-アップロード
             accept=".JPG、.PNG、.JPEG、.jpg、.png、.jpeg"
             複数
          >
            <i class="el-icon-plus"></i>
          </el-アップロード>

   <el-アップロード
            アクション="https://xxxx"
            :headers="ヘッダーをインポート"
            リストタイプ="絵カード"
            :on-preview="ハンドルPictureCardPreview"
            :on-remove="ハンドル削除"
            :on-success="アバターハンドル成功"
            :limit="制限"
             :on-exceed="masterFileMax"
             accept=".JPG、.PNG、.JPEG、.jpg、.png、.jpeg"
             複数
          >
            <i class="el-icon-plus"></i>
          </el-アップロード>
 
 
 
<スクリプト>
'@/utils/token' から {getToken} をインポートします。
エクスポートデフォルト{
  名前:'フィードバック',
  データ() {
    戻る {
      インポートヘッダー: {トークン: getToken()},
       画像:[],
      制限:9
    };
  },
  メソッド: {
  //画像を削除する handleRemove(file, fileList) {
     const idx = this.images.findIndex(it=>it===file.response.data.fullurl)
     this.images.splice(idx,1)
    },
    handlePictureCardPreview(ファイル) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //アップロード成功後のデータ handleAvatarSuccess(response, file, fileList){
      console.log(レスポンス、ファイル、ファイルリスト);
      if(レスポンスコード===1){
        this.images.push(レスポンスデータ.fullurl)
      }
    },
    // 最大何枚の写真をアップロードできるか masterFileMax(files, fileList) {
        console.log(ファイル、ファイルリスト);
        this.$message.warning(`最大 ${this.limit} 個のファイルをアップロードしてください。`);
    }
  }
};
</スクリプト> 

補足: vueプロジェクトでelement-uiのUploadコンポーネントを使用する

<el-アップロード
               v-else
               クラス='ensureensureButt'
               :action="インポートファイルURL"
               :data="アップロードデータ"
               name="インポートファイル"
               :onError="アップロードエラー"
               :onSuccess="アップロード成功"
               :beforeUpload="アバターアップロード前"
               >
               <el-button size="small" type="primary">OK</el-button>

このうち、importFileUrlはバックグラウンドインターフェース、upLoadDataはファイルをアップロードする際にアップロードする追加パラメータ、uploadErrorはファイルのアップロードが失敗したときのコールバック関数、uploadSuccessはファイルのアップロードが成功したときのコールバック関数、beforeAvatarUploadはファイルをアップロードする前に呼び出される関数です。ここでファイルの種類を判断できます。

データ () {
    インポートファイル URL: 'http:dtc.com/cpy/add',
    アップロードデータ: {
        cpyId: '123456', 
        発生時刻: '2017-08'
    }
},
メソッド: {
    // アップロード成功後のコールバックuploadSuccess (response, file, fileList) {
      console.log('ファイルをアップロード', 応答)
    },
    // アップロードエラー uploadError (response, file, fileList) {
      console.log('アップロードに失敗しました。もう一度お試しください!')
    },
    // アップロード前にファイルサイズを決定する beforeAvatarUpload (file) {
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const extension3 = file.name.split('.')[1] === 'doc'
      const extension4 = file.name.split('.')[1] === 'docx'
      定数isLt2M = ファイルサイズ / 1024 / 1024 < 10
      if (!拡張子 && !拡張子2 && !拡張子3 && !拡張子4) {
        console.log('アップロードできるテンプレートは xls、xlsx、doc、docx 形式のみです!')
      }
      もし (!isLt2M) {
        console.log('アップロードされたテンプレートのサイズは10MBを超えることはできません!')
      }
      拡張子を返す || extension2 || extension3 || extension4 && isLt2M
    }
}

これで、Vue での Element el-upload コンポーネントの使用に関するこの記事は終了です。Vue Element el-upload コンポーネントに関する関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue-cli3.0+element-ui アップロードコンポーネント el-upload の使用
  • vue+elementUI (el-upload) 画像圧縮、デフォルトの同じ比率の圧縮操作
  • vue2.0 element-ui で el-upload の before-upload メソッドが false を返すと submit() が機能しない問題を解決する

<<:  nginx 設定ファイルパスとリソースファイルパスを表示する方法

>>:  MySQL マスタースレーブレプリケーションの原理と注意点

推薦する

VMwareワークステーションとデバイス/資格情報の非互換性によって発生する起動エラーについて

VMware Workstationsが仮想マシンエラーを起動する エラー レポートのリンク htt...

VC6.0をWIN10にインストールすると使用できない問題の解決方法

VC6.0は確かに古すぎるVC6.0は昔の開発ツールです。現在のwin10では対応していません。しか...

Django+vue 登録とログインのサンプルコード

登録するフロントエンドは、vue の axios を使用して値を渡し、取得したアカウントとパスワード...

JavaScript を使用した数独の完全な実装プロセス

目次序文数独の解き方最初のボックスに記入してください2番目のボックスに記入してください3番目のボック...

要素の幅(高さ)の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...

JavaプログラミングでJavaScriptの超実用的なテーブルプラグインを書く

目次効果ドキュメント最初のステップステップ2ステップ3ソースコード効果ドキュメント最初のステップta...

Vueのフロントエンドとバックエンドのポートの不一致の問題を解決する

Vue のフロントエンドとバックエンドのポートが一致していませんconfig index.jsファイ...

Ubuntu 向け VMware Tools のインストールと構成のチュートリアル

以前、ブロガーは VMware 仮想マシンに Ubuntu システムをインストールしました。まだイン...

MySQL 5.7.18 Green Edition のダウンロードとインストールのチュートリアル

この記事では、MySQL 5.7.18のグリーンバージョンをダウンロードしてインストールする詳細な手...

MySQL の遅いクエリとクエリ再構築方法の記録

序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...

デザインリファレンス 美しく独創的なブログデザイン

以下にリストされているすべてのブログはオリジナルであり、独自にデザインされています。これらは、他者が...

Node.js で MySQL データベースにバッチデータを挿入する方法

プロジェクト(nodejs)では、一度に複数のデータをデータベースに挿入する必要があります。データベ...

Linux で AIDE に基づいてファイルシステムの整合性を検出する方法

1. 補助AIDE (Advanced Instruction Detection Environm...

Linux での Centos7 ファイアウォールの基本的な使用方法の詳細な説明

1. ファイアウォールの基本的な使い方起動する: systemctl は、firewalld を起動...

MySQL テーブルがロックされているかどうかを照会する方法

具体的な方法: (推奨チュートリアル:MySQLデータベース学習チュートリアル)テーブルロックの状態...