Prólogo :
El complemento de cuadro de texto enriquecido vue-quill-editor se usa ampliamente. Recientemente, la empresa necesita escribir un documento de orientación, pero se descubrió que al cargar una imagen, convierte directamente la imagen a base64 para mostrarla y el contenido del editor de texto enviado en este momento también debe ser una gran cadena de cadenas html+image base64, que por supuesto no se pueden almacenar directamente en la base de datos de la base de datos, a menos que no tenga miedo de una paliza violenta desde el back-end
Solución :
vue-quill-editor tiene muchas extensiones abiertas y métodos personalizados Obtenemos la imagen en nuestra propia barra de herramientas durante la inicialización montada, secuestramos el método del controlador de imágenes y llamamos a una entrada oculta: archivo en nuestra página para cargar archivos. Utilice el método de cambio de entrada para llamar a la interfaz, obtener la URL devuelta y pasar directamente al siguiente paso.
1. Descargue el complemento vue-quill-editor
npm install vue-quill-editor --save
Dado que vue-quill-editor necesita depender de quill, también se deben descargar aquellos sin quill
npm install quill --save
2. Importar en la página
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. Usar en la página
<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. Problemas de dominios
cruzados Si el dominio cruzado no está configurado, la página informará un error de dominio cruzado, lo cual es fácil de entender.Después de todo, el nombre de dominio en el lado del servidor es inconsistente con el puerto de nombre de dominio que se ejecuta solo. , entonces necesita configurarlo en este momento
. 1. Ahora la nueva versión The vue scaffolding no tiene un archivo vue.config.js. Si hay uno, configúrelo directamente debajo de este archivo. Si no, agregue un vue.config. js en el mismo directorio 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': '*',
}
}
}