Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。

Vueはvue-quill-editorリッチテキストエディタを使用し、画像をサーバーにアップロードします。

1. 準備

vue-quill-editor をダウンロード

npm install vue-quill-editor --save または yarn add vue-quill-editor

2. グローバルコンポーネント quill-editor を定義する

vue-quill-editorをダウンロードしたら、グローバルコンポーネントを定義し、quill-editorという名前を付ける必要があります。

1. テンプレートを定義する

<div>
 <クイルエディター
 v-model="値"
 ref="myQuillEditor"
 :options="エディターオプション"
 @change="onEditorChange"
 >
 </quill-editor>
 <input type="file" hidden accept=".jpg,.png" ref="fileBtn" @change="handleChange" />
</div>

2. リッチテキストオプションの設定を定義する

エディターオプション: {
 ツールバー: [
 ['太字', '斜体', '下線'], // 太字、斜体、下線、取り消し線、'取り消し線'
 ['blockquote', 'code-block'], //引用、コードブロック [{ 'header': 1 }, { 'header': 2 }], //H1 H2
 : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
}

3. 関連する方法

1. オリジナルのリッチテキストエディタのアップロード画像バインディング方法を変更する

マウント() {
 (this.$refs.myQuillEditor)の場合{
 //myQuillEditor を独自のものに変更します。this.$refs.myQuillEditor.quill.getModule("toolbar").addHandler("image", this.imgHandler);
 }
},
方法:{
 imgHandler(状態) {
 if (状態) {
 		//入力のクリックをトリガーし、fileBtn を独自の this.$refs.fileBtn.click() に置き換えます。
 }
 }
}

2. イベントをアップロードする

ハンドル変更(e) {
 const files = Array.prototype.slice.call(e.target.files);
 if (!ファイル) {
 戻る;
 }
 formdata = new FormData();
 formdata.append("file_name", files[0].name);
 formdata.append("imgs", ファイル[0]);
 //axiosリクエストを使用する this.axios({
 url: this.$store.state.baseUrl + 'upload/ueditorFile',
 メソッド: 'post'、
 データ: フォームデータ、
 ヘッダー: {'client-identity': localStorage.getItem('session_id')}
 }).then((res) => {
 	//ここで空に設定すると、同じ写真をアップロードするときに変更イベントがトリガーされます。this.$refs.fileBtn.value = "";
 (res.data.code == 200)の場合{
  選択範囲を this.$refs.myQuillEditor.quill.getSelection() とします。
  // これは返された画像アドレスです。インターフェイスがアクセス可能なアドレスを返さない場合は、自分で連結する必要があります。let imgUrl = this.$store.state.baseUrl + res.data.data; 
  imgUrl = imgUrl.replace(/\\/g,"/") 
			//羽根ペンのカーソルを取得して画像を挿入します this.$refs.myQuillEditor.quill.insertEmbed(selection != null ? selection.index : 0, 'image', imgUrl)   
			//挿入が完了すると、カーソルが 1 つ前に戻ります this.$refs.myQuillEditor.quill.setSelection(selection.index + 1);
 } 
 })
}

最後に、このグローバル quill コンポーネントを親コンポーネントで使用し、必要な関連パラメータを渡すと完了です。

これで、vue で vue-quill-editor リッチ テキスト エディターを使用して画像をサーバーにアップロードする方法についての説明は終わりです。vue-quill-editor を使用して画像をサーバーにアップロードすることに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueは添付ファイルのアップロード機能を実装しました
  • Spring+Vue は UEditor リッチテキストを統合して画像添付ファイルをアップロードします
  • Vue パッケージアップロードサーバー更新 404 問題に対する 2 つの解決策
  • Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します
  • vue-simple-uploader をベースに、ファイルセグメントアップロード、インスタントアップロード、ブレークポイント再開のグローバルアップロードプラグイン機能をカプセル化します。
  • Vue フォームのポストリクエストとサーブレットを組み合わせてファイルアップロード機能を実現する
  • Vue2をベースにモバイル画像アップロード、圧縮、ドラッグアンドドロップソート、ドラッグアンドドロップ削除機能を実現
  • vue+vantで写真をアップロードする際の注意点
  • Vueは写真を切り取ってアップロードすることを実現
  • Vueで複数の添付ファイルをアップロードする実装例

<<:  VUEをベースにしたシンプルな学生情報管理システムの実装

>>:  Vueはキー表示のショートカットキー効果を取得する入力コンポーネントを実装します

推薦する

MySQLデスクトップツールSQLyogのリソースとアクティベーション方法は、白黒のコマンドラインに別れを告げます

では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...

JSONオブジェクトのキーを置き換える最良の方法

JSON (JavaScript Object Notation、JS Object Notatio...

MySQLカスケードレプリケーションの実装方法の例

いわゆるカスケード レプリケーションでは、マスター サーバーが 1 つのスレーブ サーバーにのみデー...

React Router V6 のアップデート

目次ReactRouterV6 の変更1. <Switch> が <Routes&...

HTML入力ドロップダウンメニューを実装する方法

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

Node.js パッケージ マネージャー npm の具体的な使用方法

目次目的npm init および package.json ファイルモジュールのインストールと管理モ...

Dockerはクロスプラットフォーム機能を実現するためにnet5プログラムを導入

展開環境: ここでは docker コンテナ、Linux システム、VmWare 仮想マシンが使用さ...

JavaScript の isPrototypeOf 関数

目次1. isPrototypeOf()例 1、オブジェクト クラス インスタンス:例 2: Hum...

Vuex のコアコンセプトと基本的な使用法の詳細な説明

目次導入始めるインストール①直接ダウンロードする方法②CND法③NPM方式④糸法NPMインストールの...

UDP シンプル サーバー クライアント コード例

UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...

Ubuntu 20.04 は Wi-Fi に接続します (2 つの方法)

最近Ubuntu 20.04をインストールしましたが、Wi-Fiに接続できず、Wi-Fiアイコンも表...

JavaScript の find() メソッドと filter() メソッドの違いのまとめ

目次序文JavaScript find() メソッドJavaScript filter() メソッド...

CSS 要約ノート: 変換、遷移、アニメーションの例

1.移行遷移プロパティの使用法: transition :transition-property t...

JavaScriptを使用して独自のAjax関数を定義する

ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため...

HTML 9グリッドレイアウトの実装方法

ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...