小程序自定义上传富文本并预览

其他 2020-10-28 10:45:14 阅读次数: 0

上传时的效果
在这里插入图片描述
预览时的效果
在这里插入图片描述

代码如下（可直接全部复制查看，注意：下面上传的接口需要改成你们自己的服务器上传接口）

<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%;
}

猜你喜欢

转载自blog.csdn.net/hql1024/article/details/109216808
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022