バックエンドのVueの電力供給管理システムプロジェクトのパート7 - ファイルアップロードコンポーネントおよびリッチテキストボックス

ファイルアップロードコンポーネント

<電気のアップロード
           クラス =「アップロード-デモ」// クラススタイルの 
           アクション=「https://jsonplaceholder.typicode.com/posts/」// ファイルアップロードのターゲットパス 
           ：ON-プレビュー=「handlePreviewは、」// プレビューをクリックしたときにトリガ操作、画像リンクプレビューをクリックしてください 
           ：ON-削除=「handleRemove」// 削除すると、イベントがトリガされ 
           ます。ファイルリスト=「fileList2」// 現在ユーザが選択したファイルのリスト、データ故このリストがアップロードされますサーバーへの 
           リスト-のタイプ=「画像」// タイプ
           >
    <EL-ボタンサイズ= "小" タイプ= "プライマリ">点击上传</ EL-ボタン>
    <DIVスロット=「先端」クラス=「エル・upload__tip」>あなたは唯一の500キロバイト</ DIV>以上のものをJPG / PNG形式のファイルをアップロードし、することはできません
</ EL-アップロード>

インターフェイスのアップロードアドレス：アクション：HTTP：// localhostを：8888 / API /プライベート/ V1 /アップロード

ファイルアップロード用のファイルアップロードコンポーネントを使用します

成功したアップロードの戻り値を受信した後、
指定されたプロパティgoodsFormに保存されている指定されたデータ値を返します：写真
画像パラメータのインタフェース文書形式の記述に署名

詳細1：トークンパッシング

その内側のパッケージコンポーネントの非同期操作をアップロードするファイルをアップロード
当社独自のパッケージaxiosを使用する前に、それはそれを意味するものではありません
私たちは、自分のインターセプタを追加することを意味する前に役割を再生することができません
それは私たちが実際に使用していませんでしたインターセプターにパストークン値を設定することを意味し
結論：私たちは、手動でトークン値を追加するために渡す必要があります
パストークン値は、要求ヘッダを通過さ

リクエストヘッダは、必要があり認可許可転送するトークンはのlocalStorage、要求ヘッダーを設定：トークンを取得するリクエストヘッダを担持成分は、ヘッダに設定されています。

アクション= "のhttp：// localhostを：8888 / API /プライベート/ V1 /アップロード"
-----------------------
// 転送要求ヘッダトークンセット
に入手トークン（）{
     VARのトークン= localStorage.getItem（「itcast_pro_token」）
     リターン {「許可」：トークンを}
}

詳細2：あなたは、削除画像内のオブジェクトを削除する前に写真を追加する必要があります

// 削除
handleRemove（ファイル、のfileList）{
     // ファイルには、ファイルの削除現在で
    のvarファイル名を= file.response.data.tmp_path
     // 我々はファイルに従ってthis.goodsForm.picsにデータ内のデータを削除する
    ために（VAR I = 0;私は< この .goodsForm.pics.lengthを、Iは++ ）{
         IF（この .goodsForm.pics [I] .PIC === 名）{
             この .goodsForm.pics.splice（I ,. 1 ）
             BREAK
        }
    }
}

リッチテキストボックスプラグインの使用

ダウンロードしてインストール：NPM VUE-クイル・エディタをインストールします--save

リッチテキストボックス内のプラグインの導入

登録コンポーネント

「VUE-クイル・エディタ」からインポートVueQuillEditor

インポート'クイル/ DIST / quill.core.css' 
インポート 'クイル/ DIST / quill.snow.css' 
インポート 'クイル/ DIST / quill.bubble.css'

Vue.use（VueQuillEditor）

リッチテキストボックスのプラグインを使用します

<エル・タブ・ペインラベル=「商品説明」名前=「2」>
    <クイルエディタV-モデル= "コンテンツ" REF = "myQuillEditor"：オプション= "editorOption" スタイル= '高さ：300ピクセル'> </クイルエディタ>
</ EL-タブペイン>

製品情報を追加します。

イベントをバインドするために商品を追加するためのボタンのボタンを追加します。

// 製品情報追加
（addGoods）を{
    console.log（この.goodsForm）
    addGoodsInfo（この.goodsForm）
        .then（RES => {
        console.log（RES）
        もし（res.data.meta.statusの=== 201 ）{
             この。$メッセージ（{
                タイプ：「成功」、
                メッセージ：res.data.meta.msg
            }）
            この。$のrouter.push（{名： 'リスト' }）
        }
    }）
        。キャッチ（ERR => {
        console.log（ERR）
    }）
}

レンダリング：

要求は、このナビゲーションガードを通じてルーティングされる前に、ナビゲーションガードはまた、追加、いかなるトークン値が存在しない場合は、次に（）、決定され、そうでなければ、次の（{名：「ログイン」}）

あなたはこの記事が好きなら、あなたは私に報酬金することができ:)