首页 新闻 会员 周边 捐助

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
    // },
  },
码一码ba的主页 码一码ba | 初学一级 | 园豆:152
提问于:2023-05-18 13:06
< >
分享
最佳答案
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
Technologyforgood | 大侠五级 |园豆:7484 | 2023-05-18 21:58

感谢

码一码ba | 园豆:152 (初学一级) | 2023-05-19 14:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册