使用editor将图片转换成base64格式后上传云数据库,大图片影响其它字段赋值,或赋值不成功?
var app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
html: {
value: "",
type: String,
},
placeholder: {
value: "介绍一下你的活动详情吧,支持文字和图片...",
type: String,
}
},
/**
* 组件的初始数据
*/
data: {
formats: {},
bottom: 0,
readOnly: false,
_focus: false,
html: null,
act_location:'',
act_title:'',
act_member:'',
title:'',
imgSrc:''
},
getHtml: function(e) {
console.log("hqhtml", e.detail.html)
},
/**
* 组件的方法列表
*/
methods: {
readOnlyChange() {
this.setData({
readOnly: !this.data.readOnly
})
},
onLoad() {
this.setData({
html:app.globalData.html
})
},
//获取云端数据库数据
onLoad: function (options) {
const db = wx.cloud.database({
env: 'huodongxingqiu-6g8n0q7s0e028ff9'
})
db.collection('ACT_INFO').get({
success: res => {
console.log(res.data)
this.setData({
array: res.data
})
}
})
},
// 活动标题
act_title(event) {
// .detail 为当前输入的值
console.log(event.detail);
this.setData({
act_title:event.detail.value,
})
},
// 活动地点
act_location(loca) {
// .detail 为当前输入的值
console.log(loca.detail);
this.setData({
act_location:loca.detail.value,
})
},
// 编辑器初始化完成时触发
onEditorReady: function() {
const that = this;
that.createSelectorQuery().select('#editor').context(function(res) {
that.editorCtx = res.context;
}).exec();
},
undo() {
this.editorCtx.undo();
},
redo() {
this.editorCtx.redo();
},
format(e) {
let {
name,
value
} = e.target.dataset;
if (!name) return;
// console.log('format', name, value)
this.editorCtx.format(name, value);
},
// 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式
onStatusChange(e) {
const formats = e.detail;
this.setData({
formats
});
},
// 插入分割线
insertDivider() {
this.editorCtx.insertDivider({
success: function() {
console.log('insert divider success')
}
});
},
// 清除
clear() {
this.editorCtx.clear({
success: function(res) {
console.log("clear success")
}
});
},
// 移除样式
removeFormat() {
this.editorCtx.removeFormat();
},
// 插入当前日期
insertDate() {
const date = new Date()
const formatDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
this.editorCtx.insertText({
text: formatDate
});
},
//插入活动图片
insertActImage() {
wx.chooseImage({
count: 1,
success: chooseResult => {
// 将图片上传至云存储空间
wx.cloud.uploadFile({
// 指定上传到的云路径
cloudPath:'images/Act_info/'+this.data.act_title+'.png',
// 指定要上传的文件的小程序临时文件路径
filePath: chooseResult.tempFilePaths[0],
config: {
env: this.data.envId
}
}).then(res => {
console.log('上传成功', res);
this.setData({
imgSrc: res.fileID
});
app.globalData.imagesSrc = res.fileID
wx.hideLoading();
}).catch((e) => {
console.log(e);
wx.hideLoading();
});
},
});
},
onimgEditorReady: function() {
const that = this;
that.createSelectorQuery().select('#imgeditor').context(function(res) {
that.ditorCtx = res.context;
}).exec();
},
//选择活动图片
chooseImage(e) {
console.log("图片-----", e)
wx.chooseImage({
sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
success: res => {
const images = this.data.Actimages.concat(res.tempFilePaths);
this.data.images = images.length <= 3 ? images : images.slice(0, 3);
console.log(this.data.images)
}
})
},
//插入图片
insertImage() {
wx.chooseImage({
count: 6,
success: (res) => {
//将图片转换成basse64
var base64 = "data:image/png;base64," + wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], "base64")
this.editorCtx.insertImage({
src: base64,
width: '100%',
data: {
id: 'abcde',
role: 'gods'
},
success: () => {
console.log('insert image success')
}
})
}
});
},
onimgEditorReady: function() {
const that = this;
that.createSelectorQuery().select('#editor').context(function(res) {
that.ditorCtx = res.context;
}).exec();
},
//选择图片
chooseImage(e) {
console.log("图片-----", e)
wx.chooseImage({
sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
success: res => {
const images = this.data.images.concat(res.tempFilePaths);
this.data.images = images.length <= 3 ? images : images.slice(0, 3);
console.log(this.data.images)
}
})
},
//输入监控
toDeatil() {
this.editorCtx.getContents({
success: (res) => {
//子组件传递父组件
this.triggerEvent('getHtml', {
html: res.html
})
app.globalData.html = res.html
},
fail: (res) => {
console.log("fail:", res);
}
});
},
toImgDeatil() {
this.editorCtx.getContents({
success: (res) => {
//子组件传递父组件
this.triggerEvent('getImg', {
act_title: res.Img
})
app.globalData.act_img = res.Img
},
fail: (res) => {
console.log("fail:", res);
}
});
},
// 获取内容
clickLogText() {
this.editorCtx.getContents({
success: (res) => {
app.globalData.act_title = this.data.act_title
app.globalData.act_location = this.data.act_location
app.globalData.act_img = this.data.images
console.log(app.globalData.html)
wx.navigateTo({
url: '/pages/me/release_act/preview/preview'
})
},
fail: (res) => {
console.log("fail:" , res);
}
});
const db = wx.cloud.database({
env: 'huodongxingqiu-6g8n0q7s0e028ff9'
})
db.collection('ACT_INFO').add({
data:{
Act_ID: app.globalData.act_title,
Act_subject: '公益活动',
Act_comment:app.globalData.html,
Act_data_start:'',
Act_data_end:'',
Act_location:app.globalData.act_location,
Act_menber:'',
Act_picture_url:app.globalData.imagesSrc,
},
success:function(res){
成功回调
}
})
},
},
})