小程序云开发如何实现图片上传及发表文字


Posted in Javascript onMay 17, 2019

微信给了我们存储空间以及图片上传的功能,我们怎么可以轻易放过呢?

先看看界面:

小程序云开发如何实现图片上传及发表文字

二话不说, 先实现界面:

<!--pages/pulish/pulish.wxml-->
<view class='flexDownC'>
 <view class='flexDownC w100'> 
 <textarea class='input' bindinput='textInput' placeholder-style='margin-left:20rpx;' maxlength='500' placeholder='和大家一起分享你遇到的趣事,糗事吧' value='{{text}}' auto-focus auto-height></textarea>
 </view>

 <view class='btm flexSpaceBet w100 publishItem'>
 <image src='../../images/pic.png' class='pic' bindtap='doUpload'></image>
 <view class='pulishBtn' bindtap='pulish'> 发布</view>
 
 </view>
 <!-- wx:for='{{imgUrl}}' -->
 <view class='flexCenter w100' wx:if='{{imgUrl}}'>
 <!-- <view wx:for='{{imgUrl}}' class='{{imgUrl.length == 1? "imgUrlClass1": imgUrl.length == 2? "imgUrlClass2": imgUrl.length == 3? "imgUrlClass3": "imgUrlClass4"}}' > -->
  <image src='{{imgUrl}}' class='w100' mode="aspectFit" ></image>
 <!-- </view> -->
 
 </view>
 <!-- <image class='w100' src='cloud://qiupihu-d1e452.7169-qiupihu-d1e452/1451.gif'></image> -->

</view>

wxss:

/* pages/pulish/pulish.wxss */


.input{
 font-size: 28rpx;
 color: #666;
 width: 100%;
 min-height: 60rpx;
 height: auto;
 border-radius: 10rpx;
 padding: 20rpx;
}

.fl{
 display: flex;
 justify-content: flex-start;
}

.pic{
 width: 64rpx;
 height: 64rpx;
 margin-left: 20rpx;
}

.w100{
 width: 100%;
}

.publishItem{
 margin-top: 80rpx;
 height: 80rpx;
 border-top: 1px solid #ea9518;
 border-bottom: 1px solid #ea9518;
}

.pulishBtn{
 width: 100rpx;
 height: 50rpx;
 color: #fff;
 font-size: 28rpx;
 background: #ea9518;
 border-radius: 0.1;
 text-align: center;
 font-weight: bold;
 margin-right: 20rpx;
 line-height: 50rpx;
}

.h100{
 height: 100rpx;
}


.imgUrlClass2{
 width: 50%;
}

.imgUrlClass1{
 width: 100%;
}


.imgUrlClass3{
 width: 33%;
}

.imgUrlClass4{
 width: 24%;
}

接下来就是js的代码了:

我们要求发布的人必须是已登录状态,这个可以查看本地是否有username得知

// pages/pulish/pulish.js
var app = getApp()
const db = wx.cloud.database()
const _ = db.command;
Page({

 /**
 * 页面的初始数据
 */
 data: {
 text: '',
 imgUrl: '',
 count: 0
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 this.getCount()
 
 },
 onShow: function(){
 let userOpenId = wx.getStorageSync('openId')
 if (!userOpenId) {
  wx.showToast({
  title: '您还未登录,请先登录~',
  icon: 'none'
  })

  setTimeout(() => {
  wx.switchTab({
   url: '../me/me',
  })
  }, 1500)
 } else {
  console.log(userOpenId)
 }
 },
 getCount: function(){
 //已输入的字数
 var that = this
 db.collection('funnys').count({
  success: res => {
  that.setData({
   count: Number(res.total) + 1
  })
  }
 })

 },
 textInput: function(e){
 this.setData({
  text: e.detail.value
 })
 },
 pulish: function(){

 var data = {
  image: new Array(app.globalData.fileID), //将图片储存为数组类型
  content: this.data.text, //用户输入的文字
  comment: [],
  userId: wx.getStorageSync('userId'),
  username: wx.getStorageSync('username'), //用户名
  id: Number(this.data.count) +1, //是现在数据库的条数+1,微信小程序的不知道怎么设置自增的数字字段
  shareNum: 0,
  commentNum: 0,
  validStatus: 0,
  validTime: 0
 }
 //validStatus: 审核状态, 通过时候 +1, 反对时候-1
 //validTime: 审核次数, 最多5次,如果反对的人大于等于3,则不通过

 console.log(data)

 if (data.content){
  db.collection('funnys').add({
   data: data,
   success:res => {
   wx.showToast({
    title: '发布成功',
   })
   setTimeout(()=>{
    
    wx.switchTab({
    url: '../index/index',
    })
   }, 1000)
   },
   fail: e=>{
   wx.showToast({
    title: '发布错误',
   })
   console.log(e)
   }
  })
 }else{
  wx.showToast({
  title: '请填写文字',
  icon: 'none'
  })
 }

 },

 // 上传图片
 //上传的时候,我们可以获得一个fileId,这个id我们必须存起来,在别人查看的时候,image的src使用的就是fileId,然后用户必
 //须得知道上传的是哪张图片呀, 所以我们使用的是本地的图片路径来展示,即imagePath 
 doUpload: function () {
 // 选择图片
 var that = this;
 wx.chooseImage({
  count: 1,
  sizeType: ['compressed'],
  sourceType: ['album', 'camera'],
  success: function (res) {

  wx.showLoading({
   title: '上传中',
  })

  const filePath = res.tempFilePaths[0]
  that.setData({
   imgUrl: filePath
  })
  // 上传图片
  const cloudPath = that.data.count + filePath.match(/\.[^.]+?$/)[0]
  //改写: 数组 多图片
  // const filePath = res.tempFilePaths, cloudPath = [];
  // filePath.forEach((item, i)=>{
  // cloudPath.push(that.data.count + '_' + i + filePath[i].match(/\.[^.]+?$/)[0])
  // })
   
  console.log(cloudPath)


  // filePath.forEach((item, i) => {
   wx.cloud.uploadFile({
   cloudPath,
   filePath,
   success: res => {
    console.log('[上传文件] 成功:', cloudPath, res)

    app.globalData.fileID = res.fileID
    app.globalData.cloudPath = cloudPath
    app.globalData.imagePath = filePath
    
   },
   fail: e => {
    console.error('[上传文件] 失败:', e)
    wx.showToast({
    icon: 'none',
    title: '上传失败',
    })
   },
   complete: () => {
    wx.hideLoading()
   }
   })
  // })

  },
  fail: e => {
  console.error(e)
  }
 })
 },
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})

到此为止,功能就实现了。

那么,到此为止,点赞功能就基本完成了, 请看详细代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
轮播图组件js代码
Aug 08 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
js实现移动端轮播图
Dec 21 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
tsconfig.json配置详解
May 17 #Javascript
小程序云函数调用API接口的方法
May 17 #Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 #Javascript
微信小程序云开发之使用云函数
May 17 #Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #jQuery
微信小程序云开发之使用云数据库
May 17 #Javascript
微信小程序云开发之使用云存储
May 17 #Javascript
You might like
apache配置虚拟主机的方法详解
2013/06/17 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
Python的subprocess模块总结
2014/11/07 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python中class的定义及使用教程
2019/09/18 Python
Python argparse模块应用实例解析
2019/11/15 Python
pytorch实现线性拟合方式
2020/01/15 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技