quillEditor 如何上传图片到服务器,并返回对应地址
0
悬赏园豆：15
[已解决问题]
解决于 2023-05-19 14:21
<quill-editor ref="myQuillEditor" v-model="dialogFrom.content" :options="editorOption" :disabled="disShow"
style="height: 200px;margin-bottom: 85px;"/>
editorOption: {
theme: "snow", // or 'bubble'
placeholder: "请输入消息内容",// 修改富文本默认提示
modules: {
imageResize: {
action: 'common.uploadfile.single', // 必填参数 图片上传地址
methods: 'POST', // 必填参数 图片上传方式
token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
name: 'img', // 必填参数 文件的参数名
},
}
// loading: true, //是否显示上传加载
// name: 'img', //设置上传参数名
// methods: 'POST',
// action:"/imcis/common/tMxAttachment/upload",//设置上传文件请求路径
// response: (res) => { //这里返回的你上传之后的图片地址
// console.log(res.data,12324)
// return res.data
// },
},
最佳答案
0
要在Quill Editor中上传图片到服务器并返回对应地址，您需要执行以下步骤：
在服务器端设置一个接口来处理图片上传请求。根据您提供的代码，上传地址应为/imcis/common/tMxAttachment/upload。确保该接口能够接收图片文件，并将其保存到服务器上的适当位置。
在前端代码中，您需要为Quill Editor配置正确的editorOption。根据您提供的代码，您需要使用imageResize模块来处理图片上传。确保action属性指向您的图片上传接口，methods属性设置为POST，token属性可选，根据需要设置。
在服务器端的图片上传接口中，将接收到的图片文件保存到服务器上，并生成一个对应的图片地址。
根据您的需求，您可以将生成的图片地址返回给前端，并在response回调函数中处理返回的地址。您可以在response回调函数中执行适当的操作，例如将图片地址插入到编辑器中。
下面是一个示例，展示了如何在Quill Editor中上传图片并处理返回的图片地址：
javascript
Copy code
<template>
<quill-editor ref="myQuillEditor" v-model="dialogFrom.content" :options="editorOption" :disabled="disShow" style="height: 200px; margin-bottom: 85px;" />
</template>
<script>
export default {
data() {
return {
dialogFrom: {
content: '', // 存储编辑器内容
},
editorOption: {
theme: 'snow',
placeholder: '请输入消息内容',
modules: {
imageResize: {
action: '/imcis/common/tMxAttachment/upload', // 图片上传地址
methods: 'POST', // 图片上传方式
token: '', // 可选，根据需要设置
name: 'img', // 文件的参数名
response: (res) => {
// 图片上传成功后的处理函数
const imageUrl = res.data; // 从响应中获取图片地址
this.insertImage(imageUrl); // 在编辑器中插入图片
},
},
},
},
};
},
methods: {
insertImage(imageUrl) {
const range = this.$refs.myQuillEditor.getQuill().getSelection(true); // 获取当前光标位置
this.$refs.myQuillEditor.getQuill().insertEmbed(range.index, 'image', imageUrl); // 在光标位置插入图片
},
},
};
</script>
在这个示例中，我们定义了一个insertImage方法，它用于在编辑器中插入图片。在response回调函数中，我们从响应中获取到图片地址imageUrl，然后调用insertImage方法将图片插入到编辑器中。
请注意，上述示例仅展示了一个基本的图片上传和插入逻辑，您可能需要根据实际需求进行修改和完善。
希望这能帮助到您！如有任何其他问题，请随时提问。
收获园豆：15
感谢
