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はキー表示のショートカットキー効果を取得する入力コンポーネントを実装します

推薦する

JSが5つ星の賞賛を獲得

この記事では、5つ星の評価を獲得するためのJSの具体的なコードを参考までに共有します。具体的な内容は...

WeChatミニプログラムでトークンの有効期限を処理する方法

目次まず結論から質問解決Promiseを使用してコールバック関数をカプセル化する要約するまず結論から...

HTMLのフォントがline-heightを指定しても垂直方向に中央揃えできない問題の解決方法を詳しく説明します

による写真に示されている効果を例に挙げてみましょう。明らかに、「次へ」というテキストを水平方向だけで...

JavaScriptはシンプルな日付効果を実装します

JavaScriptの日付エフェクトの具体的なコードは参考用です。具体的な内容は次のとおりです。コー...

HTML 固定タイトル列、タイトル ヘッダー テーブル固有の実装コード

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

Linux での感嘆符コマンド (!) の使用の概要

序文最近、弊社では mbp の設定をしており、ssh を使うことが多くなりました。複雑なコマンドを書...

Dockerコンテナを使用してホストネットワークにアクセスする方法

最近、nginx をリバース プロキシとして使用し、docker で nginx を実行するシステム...

JavaScript 配列の詳細な概要

目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...

MySQL では SQL ステートメントはどのように実行されますか?

目次1. MySQLアーキテクチャの分析1.1 コネクタ1.2 クエリキャッシュ1.3 アナライザー...

Docker コンテナのデプロイの試み - マルチコンテナ通信 (node+mongoDB+nginx)

その理由はモッカー プラットフォームを導入したかったので、友人の勧めで既成のプロジェクト api-m...

フロントエンド開発に必要な共通ツール機能のまとめ

1. 時刻の書式設定とその他の方法moment.jsライブラリファイルの使用をお勧めします2. テン...

emとは?emとpxの紹介と変換方法

それは何ですか? em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...

MySQLインデックスの基礎となるデータ構造の詳細

目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...

MySQL における datetime と timestamp の違いと使い方

1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか?実際、表現方法はいろいろありま...

docker公式mysqlイメージのカスタム構成の詳細な説明

インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...