软件开发教程 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试
游戏开发 网络协议 系统运维 HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程
C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
 
   -> JavaScript知识库 -> 【个人笔记】解决vue使用ueditor上传图片没反应或不显示 -> 正文阅读

[JavaScript知识库]【个人笔记】解决vue使用ueditor上传图片没反应或不显示

1.定义全局变量,存放上传图片的接口地址

比如可以创建一个config目录,在目录下创建一个api.js,定义全局变量并抛出

export default {
  ueditorUploadUrl: (CONFIG.base || process.env.VUE_APP_BASE_API) + '/file/upload', // 富文本上传地址
}

2.修改单文件上传方法

打开ueditor.all.js,找到单文件上传方法。
1.先修改请求方法,大约在24572行,注释的是原来的代码
在这里插入图片描述
代码:

var fileForm  = new FormData()
fileForm.append('file', input.files[0])

var oReq = new XMLHttpRequest()

oReq.open('POST', imageActionUrl, true)
oReq.send(fileForm)

oReq.onreadystatechange = function(responseText) {
	 if (oReq.readyState === 4 && oReq.status === 200) {
		var resData = eval("("+oReq.responseText+")")
		callback(resData)
	}
}

2.修改callback,根据返回的内容格式去修改,大概在24517行
在这里插入图片描述
这里就不贴代码了,贴出返回的内容格式

{
    "success": true,
    "respCode": "000000",
    "respMsg": "操作成功",
    "param": {
        "url": "https://dev.xxx.com/group1/M00/00/02/wKgjdGDxYl2Ace4-AAA9IiYyYjY645.jpg",
        "storeFileName": "group1:M00/00/02/wKgjdGDxYl2Ace4-AAA9IiYyYjY645.jpg",
        "name": "u=4081253824,3666810388&fm=26&gp=0.jpg",
        "fileUrl": "group1/M00/00/02/wKgjdGDxYl2Ace4-AAA9IiYyYjY645.jpg"
    }
}

就这样
参考:如何在VUE3.0项目中使用UEDITOR上传图片并回显 含TOKEN(VUE+VUE-UEDITOR-WRAP)

  JavaScript知识库 最新文章
Vue2学习计划一:Vue初体验
Vue中路由表单缓存(keep-alive)
项目中的富文本编辑器该如何选择?
个人学习记录 - NodeJs Express 创建基础项
Vue开发笔记
typescript——前言和基础环境配置
Vue关于swiper轮播图组件的小细节
Vite创建Vue3.0项目
前端数据可视化之Echarts初体验
使用vue-route下的next({ ...to replace: t
上一篇文章           查看所有文章
加:2021-07-17 11:49:36  更:2021-07-17 11:52:11 
 
360图书馆 购物 三丰科技 阅读网 日历 万年历 2021年7日历 -2021/7/27 4:28:42-
图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件开发教程