上传时的效果 预览时的效果
代码如下（可直接全部复制查看，注意：下面上传的接口需要改成你们自己的服务器上传接口）
<view class="col"> <text>编辑富文本</text> <view class="fill_text" bindtap="addText" wx:if="{{baseArr.length == 0}}"> <view>请点击下方图片或文字，编辑内容</view> </view> <block> <view class="enroll-content-item" wx:for="{{baseArr}}" wx:key="index"> <view class="enroll-content-item__header"> <view class="enroll-item__header__content"> <image src="{{item.img}}" class="enroll-content-item__icon"></image> <text class="enroll-content-item__text">{{item.name}}</text> <image bindtap="moveContent" data-type="shang" data-i="{{index}}" src="http://sucai.suoluomei.cn/sucai_zs/images/20200703115147-%E4%B8%8A%402x.png" class="enroll-content-item__down"></image> <image bindtap="moveContent" data-type="xia" data-i="{{index}}" src="http://sucai.suoluomei.cn/sucai_zs/images/20200703115147-%E4%B8%8A%E5%A4%87%E4%BB%BD%402x.png" class="enroll-content-item__down"></image> </view> <image bindtap="deleteContent" data-i="{{index}}" class="enroll-item__header__btn" src="http://sucai.suoluomei.cn/sucai_zs/images/20200703115147-%E5%88%A0%E9%99%A4%402x.png"></image> </view> <!-- 文本 --> <block wx:if="{{item.type == 'text'}}"> <textarea placeholder="请输入描述" data-i="{{index}}" value="{{item.value}}" bindinput="getAddText" maxlength="-1"></textarea> </block> <!-- 图片 --> <block wx:if="{{item.type == 'image'}}"> <view class="enroll-content-item__image-wrapper"> <image mode="aspectFill" class="{{item.value.length === 1 ? 'enroll-content-item__image' : 'enroll-content-item__image-mini'}}" wx:for="{{item.value}}" wx:for-item="ctValItem" wx:for-index="ctValIdx" src="{{ctValItem}}"></image> </view> </block> <!-- 视频 --> <block wx:if="{{item.type == 'video'}}"> <video src="{{item.value}}" class="enroll-content-item__video"></video> </block> </view> </block> <view class="enroll-uploader"> <view class="item" data-type="detail_img" bindtap="getuploadImg"> <image mode="aspectFill" class="icon" src="http://sucai.suoluomei.cn/sucai_zs/images/20200618171425-%E5%9B%BE%E7%89%87.png"></image> <view class="text">图片</view> </view> <view class="item" bindtap="addText"> <image mode="aspectFill" class="icon" src="http://sucai.suoluomei.cn/sucai_zs/images/20200618171425-%E6%B7%BB%E5%8A%A0%E6%96%87%E5%AD%97.png"></image> <view class="text">文字</view> </view> <view class="item" bindtap="getuploadVideo"> <image mode="aspectFill" class="icon" src="http://sucai.suoluomei.cn/sucai_zs/images/20200618171425-%E8%A7%86%E9%A2%91.png"></image> <view class="text">视频</view> </view> </view> </view> <view bindtap="savebtn" class="subimt"> <text>提交</text> </view> <view> <view class="xianqDeat" wx:if='{{description.length > 0}}' wx:for='{{description}}' wx:key='index'> <view class="xianqDeatWenz" wx:if="{{item.type == 'text'}}"> <text>{{item.value}}</text> </view> <view class="tupianxa" wx:if="{{item.type == 'image'}}"> <image wx:for='{{item.value}}' wx:for-item='roes' mode="widthFix" wx:for-index='i' wx:key='i' class="xqTupian" data-item="{{item.value}}" data-img_url="{{roes}}" src="{{roes}}" bindtap="yulanTp"> </image> </view> <view class="shipingBOfanone" wx:if="{{item.type == 'video'}}"> <video src="{{item.value}}" class='video' wx:if="{{videoIndex == index}}" objectFit='contain' autoplay='false' controls></video> <view style="display: {{videoIndex == index ? 'none' : 'block' }};" data-id="{{index}}" bindtap="videoPlay"> <image mode="aspectFill" class="moviseo" src="{{item.value+'?x-oss-process=video/snapshot,t_2000,f_jpg,w_0,h_0,m_fast'}}"> </image> <image class="video-image-play" src="https://sucai.suoluomei.cn/sucai_zs/images/20200321105958-suspended%403x.png" mode="scaleToFill"> </image> </view> </view> </view> </view> const wxRequest = require('../../utils/http.js') const app = getApp() Page({ data: { baseArr: [], //上传的整个数组 upImages: [], //上传的暂存区 textItem: { name: '文字', img: 'http://sucai.suoluomei.cn/sucai_zs/images/20200703115147-%E8%BE%93%E5%85%A5%402x.png', type: 'text', value: '', }, imageItem: { name: '图片', img: 'http://sucai.suoluomei.cn/sucai_zs/images/20200618171425-%E5%9B%BE%E7%89%87.png', type: 'image', value: '', }, videoItem: { name: '视频', img: 'http://sucai.suoluomei.cn/sucai_zs/images/20200618171425-%E8%A7%86%E9%A2%91.png', type: 'video', value: '', }, description: [], //页面渲染的数组 videoIndex: "", }, onLoad: function (options) { this.getgoods() }, onShow: function (options) { }, // 新增详情js // 删除baseArr数组 deleteContent(e) { let that = this let i = e.currentTarget.dataset.i that.data.baseArr.splice(i, 1) that.setData({ baseArr: that.data.baseArr }) }, // 添加文字 addText() { let that = this var textItem = JSON.parse(JSON.stringify(that.data.textItem)) that.data.baseArr.push(textItem) that.setData({ baseArr: that.data.baseArr }) }, // 给文本域赋值 getAddText(e) { let i = e.currentTarget.dataset.i this.data.baseArr[i].value = e.detail.value }, // 添加图片 addImage() { let that = this var imageItem = JSON.parse(JSON.stringify(that.data.imageItem)) that.data.baseArr.push(imageItem) that.setData({ baseArr: that.data.baseArr, forbidden: false }) }, // 添加视频 addVideo() { let that = this var videoItem = JSON.parse(JSON.stringify(that.data.videoItem)) that.data.baseArr.push(videoItem) that.setData({ baseArr: that.data.baseArr, forbidden: false }) }, // 上传图片 getuploadImg(e) { var that = this let i = e.currentTarget.dataset.i let idx = e.currentTarget.dataset.idx let type = e.currentTarget.dataset.type let count = 9 if (type == 'shop_img') { count = 1 } wx.chooseImage({ count: count, sizeType: ['compressed'], sourceType: ['album', 'camera'], success(res) { that.setData({ upImages: [], forbidden: true }) that.getpublish(res.tempFilePaths, 0, type, i, idx) } }) }, // 上传视频 getuploadVideo() { var that = this wx.chooseVideo({ success: function (res) { that.setData({ forbidden: true }) let arr = [] arr.push(res.tempFilePath) that.getpublish(arr, 0, 'video') } }) }, // 递归循环上传图片 //.herbplantist.com/sucai/public/index.php/post/post/uploadFile getpublish(list, i, type, index, idx) { wx.showLoading({ title: '正在上传第' + (i + 1) + '张', }) var that = this wx.uploadFile({ url: "https://api110", filePath: list[i], name: 'file', formData: { key: 'Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO', is_https: 1, }, success(res) { let rows = JSON.parse(res.data) if (rows.status != 200) { app.showToast('上传失败') return false } that.data.upImages.push(rows.info.url) if (i + 1 == list.length) { app.showToast('上传成功') } wx.hideLoading() if (++i < list.length) { that.getpublish(list, i, type); } else { // 上传成功后添加到baseArr数组中 if (type == 'detail_img') { that.data.imageItem.value = that.data.upImages setTimeout(function () { that.addImage() }, 200) } else if (type == 'video') { that.data.videoItem.value = rows.info.url setTimeout(function () { that.addVideo() }, 200) } else if (type == 'shop_img') { that.data.fileList.push(rows.info.url) setTimeout(function () { that.setData({ fileList: that.data.fileList, forbidden: false }) }, 200) } } }, }) }, // 移动文字、图片、视频 moveContent(e) { let that = this let index = e.currentTarget.dataset.i let type = e.currentTarget.dataset.type let arr = this.data.baseArr var temp; temp = arr[index]; switch (type) { case 'shang': if (index == 0) { return false } arr[index] = arr[index - 1]; arr[index - 1] = temp; break; case 'xia': if (index == arr.length - 1) { return false } arr[index] = arr[index + 1]; arr[index + 1] = temp; break; default: break; } that.setData({ baseArr: arr }) }, // 提交接口 savebtn() { let that = this if (that.data.imgsts == false) { app.showToast('图片上传中，请稍后提交') return false } let csdata = { goods_description: JSON.stringify(that.data.baseArr) } that.setData({ description: that.data.baseArr, }) console.log('传给后台的json', csdata) }, // 渲染数据 getgoods() { let goodsArry = [{ name: '文字', img: "http://sucai.suoluomei.cn/sucai_zs/images/20200703115147-%E8%BE%93%E5%85%A5%402x.png", type: "text", value: "sadasd", }, { name: "图片", img: "http://sucai.suoluomei.cn/sucai_zs/images/20200618171425-%E5%9B%BE%E7%89%87.png", type: "image", value: [ "https://sucai.suoluomei.cn/sucai_zs/images/2020/10/22/090933144637eace7c1bf00dabb50b27.jpg", "https://sucai.suoluomei.cn/sucai_zs/images/2020/10/22/bfcb84660b7dce71f68a4da50924bfb2.jpg" ] }, { name: "视频", img: "http://sucai.suoluomei.cn/sucai_zs/images/20200618171425-%E8%A7%86%E9%A2%91.png", type: "video", value: "https://sucai.suoluomei.cn/sucai_zs/video/2020/10/22/5f4bff1a95d0f139567a1062d08b1ff5.mp4", }, { name: "视频", img: "http://sucai.suoluomei.cn/sucai_zs/images/20200618171425-%E8%A7%86%E9%A2%91.png", type: "video", value: "https://sucai.suoluomei.cn/sucai_zs/video/2020/10/22/5f4bff1a95d0f139567a1062d08b1ff5.mp4", }] this.setData({ baseArr: goodsArry, }) }, // 渲染出来的图片预览 yulanTp(e) { let item = e.currentTarget.dataset.item let img_url = e.currentTarget.dataset.img_url var img_list = [] for (let i in item) { img_list.push(item[i]) } wx.previewImage({ current: img_url, urls: img_list }) }, // 点击图片播放视频 videoPlay(e) { let that = this var videoIndex = e.currentTarget.dataset.id that.setData({ videoIndex: videoIndex }) //停止正在播放的视频 var videoContextPrev = wx.createVideoContext(videoIndex + "") videoContextPrev.stop(); setTimeout(function () { //将点击视频进行播放 var videoContext = wx.createVideoContext(videoIndex + "") videoContext.play(); }, 500) }, }) page { background: #f5f5f5; padding: 30rpx; box-sizing: border-box; } .col { padding-top: 30rpx; box-sizing: border-box; border-bottom: 1rpx solid #f5f5f5; } .col text { font-size: 30rpx; } .fill_text { height: 110px; border: 1rpx solid #d6e4ef; margin: 0 auto; padding: 15rpx 0; box-sizing: border-box; margin-top: 30rpx; } .fill_text view { color: rgba(210, 210, 210, 1); font-size: 28rpx; } .enroll-content-item { margin: 0 auto; position: relative; } .enroll-content-item::after { content: ""; position: absolute; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-box-sizing: border-box; box-sizing: border-box; pointer-events: none; top: -50%; left: -50%; right: -50%; bottom: -50%; border: 0 solid #d6e4ef; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); border-bottom-width: 1PX; } .enroll-content-item__text { margin-right: 30rpx; } .enroll-content-item__textarea { border: none; padding: 0; padding-bottom: 12rpx; } .enroll-content-item__textarea .at-textarea__textarea { font-size: 28rpx; } .enroll-item__header__content { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .enroll-content-item__header { height: 86rpx; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; line-height: 36rpx; font-size: 28rpx; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } textarea { width: 100% !important; height: 128rpx; font-size: 28rpx; } .enroll-item__header__btn { width: 36rpx; height: 36rpx; } .enroll-content-item__icon { width: 30rpx; height: 30rpx; margin-right: 13rpx; } .enroll-content-item__down { width: 36rpx; height: 36rpx; margin-left: 10rpx; } .enroll-content-item__video { width: 100%; margin-bottom: 24rpx; } .enroll-content-item__image { width: 100%; min-height: 1rpx; margin-bottom: 24rpx; } .enroll-content-item__image-mini { width: 200rpx; height: 200rpx; margin-right: 11rpx; margin-bottom: 15rpx; } .enroll-content-item__image-mini:nth-child(3), .enroll-content-item__image-mini:nth-child(6), .enroll-content-item__image-mini:nth-child(9) { margin-right: 0; } .enroll-uploader { padding: 42rpx 0 32rpx; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-sizing: border-box; box-sizing: border-box; } .enroll-uploader .item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .enroll-uploader .item .icon { width: 34rpx; height: 34rpx; margin-bottom: 18rpx; } .enroll-uploader .item .text { font-size: 32rpx; } .enroll-uploader-item { width: 100rpx; height: 100rpx; padding: 24rpx; margin-right: 19rpx; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1rpx dashed #b2b2b2; border-radius: 10rpx; } .subimt { display: flex; justify-content: center; } .subimt text{ font-size: 28rpx; padding: 15rpx 30rpx; box-sizing: border-box; background: red; border-radius: 40rpx; color: #fff; } /* 渲染的样式 */ .xianqDeat { display: flex; flex-direction: column; font-size: 28rpx; } .xianqDeatWenz { margin: 10rpx 0; } .xqTupian { width: 100%; border-radius: 10rpx; margin-bottom: 10rpx; } .tupianxa, .shipingBOfan, .shipingBOfanone { display: flex; flex-direction: column; position: relative; } .shipingBOfan { width: 100%; height: 500rpx; } .shipingBOfanone { width: 100%; height: 500rpx; margin: 0 0 15rpx 0; border-radius: 10rpx; overflow: hidden; } .sdBtonWxpl { position: fixed; left: 30rpx; bottom: 30rpx; display: flex; flex-direction: row; width: 690rpx; border-radius: 40rpx; border: 2rpx solid #fa4753; font-size: 28rpx; z-index: 99; overflow: hidden; } .sdBtonWxpl view:nth-child(1) { display: flex; flex-direction: column; width: 35%; text-align: center; color: #fa4753; background-color: #fff; } .sdBtonWxpl view:nth-child(2) { display: flex; flex-direction: column; width: 65%; text-align: center; color: #fff; background-color: #fa4753; } .moviseo { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .video-image-play { position: absolute; width: 80rpx; height: 80rpx; top: calc(50% - 40rpx); left: calc(50% - 40rpx); } .video { width: 100%; height: 100%; }