小程序（二十五）微信小程序富文本编辑器editor上传图片

官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中，代码如下所示：

  insertImage(e) {console.log(e);const that = thiswx.chooseImage({count: 1,success: function (res) {console.log(res);that.editorCtx.insertImage({src: res.tempFilePaths[0],data: {id: 'abcd',role: 'god'},width: '80%',success: function () {console.log('insert image success')}})}})}

我这里封装的editor自定义组件图片上传也是同官方给出的示例一致，也是使用的小程序缓存。

但是在实际开发中，图片我们还是需要上传至服务器中的。

小程序上传文件需要使用到 wx.uploadFile 这个API，这里我不做赘述，直接上代码：

/**、* 插入图片*/insertImageEvent() {var self = this;wx.chooseImage({count: 1,success: response => {let path = response.tempFilePaths[0];//调用子组件方法，图片应先上传再插入，不然预览时无法查看图片。(这里调用子组件查看存至本地的临时图片)// richText.insertImageMethod(path).then(result => {//   console.log('[insert image fail callback]=>', result)// }).catch(res => {//   console.log('[insert image fail callback]=>', res)// });//*/wx.uploadFile({ //把临时图片上传到服务器url: app._server + '/xxx/xxxxxx,filePath: response.tempFilePaths[0],file: response.tempFilePaths[0],name: 'file',formData: {project_id:id,},success: (res) => {let updata = JSON.parse(res.data);console.log(updata);if (updata.code == 1) {richText.editorCtx.insertImage({ //这里是富文本编辑器 editor 组件插入图片方法；src: updata.data,data: {id: 'imgage',role: 'god'},// width: '80%',success: () => {console.log('insert image success')}})}//*/},error(result){console.log(result)}});}})},

以上的代码便是我在实际开发中使用到的图片上传的代码。

有好的建议，请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序：

小程序（二十五）微信小程序富文本编辑器editor上传图片相关推荐

小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
android前端代码编辑器,前端程序员福利，6款轻量级富文本编辑器
原标题:前端程序员福利,6款轻量级富文本编辑器 1.国产富文本编辑wangEditor 基于java和css开发的 Web富文本编辑器, 轻量.简洁.易用.开源免费,样式可自定义,菜单栏可以自定义配置 ...
php+仿微信公众号样式,仿微信公众号富文本编辑器
微信公众号富文本编辑器使用百度ueditor插件为基础加以封装百度ueditor配置提供替换皮肤,只要添加相应的样式即可(码云代码链接) TIM截图20190404150153.png 以下处理富文 ...
小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
linux exec 二程序,二十五、Linux 进程与信号---exec函数
25.1 介绍在用 fork 函数创建子进程后,子进程往往要调用一种 exec 函数以执行另一个程序当进程调用一种 exec 函数时,该进程完全由新程序代换,替换原有进程的正文,而新程序则从其 m ...
微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
html实现富文本编辑器,前端程序员福利，6款轻量级富文本编辑器，轻松实现富文本编辑...
1.国产富文本编辑wangEditor 基于javascript跟css开发的 Web富文本编辑器, 轻量.简洁.易用.开源免费,样式可自定义typecho 富文本编辑器,菜单栏可以自定义配置. 下载 ...
微信小程序富文本编辑器editor+rich-text(附源码)
之前小程序一直都是使用自己写的接口,小程序远程获取使用富文本编辑器的内容,比如UEditor,wangEditor等.我们可以选择插件wxparse和自带的rich-text,但是这些并不能完全转义他 ...

小程序（二十五）微信小程序富文本编辑器editor上传图片

小程序（二十五）微信小程序富文本编辑器editor上传图片相关推荐

最新文章

热门文章