Avant- propos :
Le plug-in de zone de texte enrichi vue-quill-editor est largement utilisé. Récemment, l'entreprise a besoin d'écrire un document d'orientation, mais il s'avère que lors du téléchargement d'une image, elle convertit directement l'image en base64 pour l'affichage, et le contenu de l'éditeur de texte soumis à ce moment doit également être une grande chaîne de chaînes html+image base64, qui bien sûr ne peuvent pas être stockées directement dans la base de données de la base de données, à moins que vous n'ayez pas peur d'une violente raclée de l'arrière
Solution :
vue-quill-editor a beaucoup d'extensions ouvertes et de méthodes personnalisées. Nous obtenons l'image dans notre propre barre d'outils lors de l'initialisation montée, détournons la méthode du gestionnaire d'image et appelons un input:file caché sur notre page de téléchargement de fichiers. Utilisez la méthode d'entrée change pour appeler l'interface, obtenir l'URL renvoyée et passer directement à l'étape suivante.
1. Téléchargez le plugin vue-quill-editor
npm install vue-quill-editor --save
Étant donné que vue-quill-editor doit dépendre de quill, ceux sans quill doivent également être téléchargés
npm install quill --save
2. Importer dans la page
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
3. Utilisation dans la page
<template>
<div id="app">
<quill-editor :options="editorOption" v-model="content" ref="myQuillEditor">
</quill-editor>
<input
type="file"
hidden
accept=".jpg,.png"
ref="fileBtn"
@change="handleChange"
/>
<button @click="submit">提交</button>
</div>
</template>
<script>
import http from "./script/httpRequest.js";
import axios from "axios";
import {
quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
data() {
return {
content: "",
editorOption: {
placeholder: "请输入信息详情",
},
};
},
components: {
quillEditor,
},
mounted() {
if (this.$refs.myQuillEditor) {
//myQuillEditor改成自己的
this.$refs.myQuillEditor.quill
.getModule("toolbar")
.addHandler("image", this.imgHandler);
//这里初始化，劫持toolbar的image的handler方法，在mounted中处理
}
},
methods: {
submit() {
console.log(this.content);
},
imgHandler(state) {
if (state) {
//触发input的单击 ，fileBtn换成自己的
this.$refs.fileBtn.click();
}
},
handleChange(e) {
const files = Array.prototype.slice.call(e.target.files);
if (!files) {
return;
}
let form = new FormData();
form.append("file", files[0]);
//由于我的接口是base64上传到服务器的，需要转成base64，否则直接将form文件上传即可
let reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = (e) => {
//将url改成自己的地址
axios.post(url, {
image: e.target.result, //如果是是以文件流上传，则改成form
})
.then((res) => {
console.log(res);
//这里设置为空是为了联系上传同张图可以触发change事件
this.$refs.fileBtn.value = "";
if (res.status === 200) {
let selection = this.$refs.myQuillEditor.quill.getSelection();
//这里就是返回的图片地址，如果接口返回的不是可以访问的地址，要自己拼接
let imgUrl = res.data.imgUrl;
//获取quill的光标，插入图片
this.$refs.myQuillEditor.quill.insertEmbed(
selection != null ? selection.index : 0,
"image",
imgUrl
);
//插入完成后，光标往后移动一位
this.$refs.myQuillEditor.quill.setSelection(selection.index + 1);
}
});
};
},
},
};
</script>
4. Problèmes
inter-domaines Si l'inter-domaine n'est pas configuré, la page signalera une erreur inter-domaine, ce qui est facile à comprendre.Après tout, le nom de domaine côté serveur est incohérent avec le port du nom de domaine qui s'exécute tout seul , alors vous devez le configurer à ce moment
. 1. Maintenant la nouvelle version L'échafaudage vue n'a pas de fichier vue.config.js. S'il y en a un, configurez-le directement sous ce fichier. Sinon, ajoutez un vue.config. js dans le même répertoire que package.json.
module.exports = {
devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost",
port: '8084',
proxy: {
'/api': {
target: 'http://localhost:7001', //API服务器的地址
changeOrigin: true,
}
},
headers: {
'Access-Control-Allow-Origin': '*',
}
}
}