您好,欢迎来到爱go旅游网。
搜索
您的当前位置:首页VueTinymce富文本框插入图片

VueTinymce富文本框插入图片

来源:爱go旅游网
VueTinymce富⽂本框插⼊图⽚

在使⽤vue 富⽂本框的时候,我们会使⽤Tinymce富⽂本框处理内容,该组件默认的上传地址的服务器部署的机器,重启机器的话会导致图⽚丢失。

此时我们希望把图⽚上传⾄fastdfs图⽚服务器,然后content中保存对应的图⽚路径组件

:multiple=\"true\" :file-list=\"fileList\" :show-file-list=\"true\"

:on-remove=\"handleRemove\" :on-success=\"handleSuccess\" :before-upload=\"beforeUpload\" class=\"editor-slide-upload\" :action=\"uploadFileUrl\" list-type=\"picture-card\">

点击上传

  

data() { return {

dialogVisible: false, listObj: {}, fileList: [],

uploadFileUrl: \"\对应后端路径 } },

methods: {

// 上传成功后的回调函数

handleSuccess(response, file) { const uid = file.uid

const objKeyArr = Object.keys(this.listObj)

for (let i = 0, len = objKeyArr.length; i < len; i++) { if (this.listObj[objKeyArr[i]].uid === uid) {

this.listObj[objKeyArr[i]].url = response.body.url // 从后端获取到的图⽚路径,会填充⾄内容的对应位置 this.listObj[objKeyArr[i]].hasSuccess = true return } } },}

  

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- igat.cn 版权所有 赣ICP备2024042791号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务