云存储uploadFile
在编辑器中添加图片后，图片自动存到云存储中
选择图片文档位置： uniapp.dcloud.net.cn/api/media/i…
上传图片文档位置： uniapp.dcloud.net.cn/uniCloud/st…
点击事件方法clickInsertImage
// 添加图片
clickInsertImage(){
uni.chooseImage({
success:res=>{
// res返回tempFiles和tempFillPaths两个对象
// 第一个信息更全,第二个只有一个路径，这里就用第一个
for(let item of res.tempFiles){
uniCloud.uploadFile({
filePath:item.path,
cloudPath:item.name
}).then(res=>{
console.log(res);
})
}
}
})
},
现在云存储中已经有这两张图了
接下来是通过上下文调用插入图片方法，将图片显示在页面中，这里又报跨域问题
// 添加图片
clickInsertImage(){
uni.chooseImage({
success:res=>{
// res返回tempFiles和tempFillPaths两个对象
// 第一个信息更全,第二个只有一个路径，这里就用第一个
for(let item of res.tempFiles){
// 上传选中的图片到云对象
uniCloud.uploadFile({
filePath:item.path,
cloudPath:item.name
}).then(res=>{
// 图片上传成功后,通过上下文将图片插入到页面中
this.editorCtx.insertImage({
src:res.fileID
})
})
}
}
})
},
还有一个问题是选两张图片只能显示一张，第二张需要拖动，证明之前的css样式的高度没有效果
之前给editor富文本组件加了一个类名myEdit，但没有对他进行控制，这里补上
<!-- 内容部分 -->
<view class="content">
<editor
class="myEdit"
placeholder="写点什么..."
show-img-size=""
show-img-toolbar=""
show-img-resize=""
@ready="onEditorReady"
@focus="onFocus"
@statuschange="onStatuschange"
></editor>
</view>
.content {
.myEdit {
// 动态计算高度,为了适配各种屏幕
height: calc(100vh - 500rpx);
margin-bottom: 30rpx;
}
}
上传需要有一个等待的过程，把异步操作改成异步同步化
// 添加图片
clickInsertImage(){
uni.chooseImage({
success: async res=>{
// 加载中效果 使用户在上传时不能乱点
uni.showLoading({
title:"上传中，请等待",
mask:true
})
// res返回tempFiles和tempFillPaths两个对象
// 第一个信息更全,第二个只有一个路径，这里就用第一个
for(let item of res.tempFiles){
// 上传选中的图片到云对象
// 等待异步操作成功后返回一个值
let res = await uniCloud.uploadFile({
filePath:item.path,
cloudPath:item.name
})
// 图片上传成功后,通过上下文将图片插入到页面中
this.editorCtx.insertImage({
src:res.fileID
})
}
// 渲染成功后,隐藏加载中效果
uni.hideLoading()
}
})
},
