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 マスタースレーブレプリケーションの原理と注意点

推薦する

JavaScript でのモグラ叩きゲームの実装

この記事では、モグラ叩きゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

カラーブロックレポート効果の動的な表示を実現する HTML (サンプルコード)

HTMLカラーブロックを使用してデータを動的に表示する <スタイル タイプ="te...

JavaScript でオブジェクトをエレガントに扱う 6 つの方法

目次序文1. オブジェクト.freeze() 2. オブジェクト.seal() 3. オブジェクト....

CSS3 フィルター (フィルタ) ウェブページのグレーまたは黒モードのサンプルコードを実現

フロントエンドcss3 フィルターは、Web ページのグレー効果を実現できるだけでなく、ナイト モー...

Vue ElementUI フォームのフォーム検証

フォーム検証は、フロントエンド開発プロセスで最もよく使用される機能の 1 つです。私の個人的な仕事経...

ネイティブ JS を使用してタッチスライド監視イベントを実装する方法

序文今日はちょっとしたデモを書きました。左右にスワイプするロジックに関わる部分があります。当初はプラ...

MySQL ビューの原理と使用法の詳細な分析

序文: MySQL では、ビューはおそらく最も一般的に使用されるデータベース オブジェクトの 1 つ...

一定時間後にNavicatがデータベースから自動的に切断される問題の解決方法

これは、データベース サーバーが、接続が多すぎるのを避けるために、一定時間非アクティブな状態が続くと...

Linux でファイルを削除するときに「操作は許可されていません」というプロンプトが表示される場合の対処方法

同僚からよく聞かれるのですが、ファイル/ディレクトリを削除すると「操作は許可されていません」というエ...

Windows 10 での MySQL 8.0 のダウンロードとインストール構成のグラフィック チュートリアル

この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...

Linux に mysql をインストールするときに /etc に my.cnf ファイルがない問題を解決する

今日、mysql ポートを変更したいと思ったのですが、/etc/ ディレクトリに my.cnf ファ...

Windows Server 2016 に Docker をインストールするプロセスと発生した問題

前提条件Windows Server でコンテナーを実行するには、Windows Server (半...

HTMLページ作成に関する私の経験の簡単な要約

Word of Mouth に入社して 3 ~ 4 か月が経ちました。仕事の中で一番の収穫は、ビジュ...

Vueは大画面ページのスクリーン適応を実現します

この記事では、大画面ページのスクリーンアダプテーションを実現するためのVueの具体的なコードを参考ま...

Ubuntuのインストール Matlab2020b の詳細なチュートリアルとリソース

目次1. リソースファイル2. インストール2.1 詳細な手順2.1.1 ディスクイメージのマウント...