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


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 相关文章推荐
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
如何在PHP中使用Oracle数据库(1)
2006/10/09 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
Javascript开发包大全整理
2006/12/22 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python操作xml文件示例
2014/04/07 Python
Python使用爬虫猜密码
2016/02/19 Python
Python如何获取系统iops示例代码
2016/09/06 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
python批量生成条形码的示例
2020/10/10 Python
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
计算机学生的自我评价分享
2014/02/18 职场文书
2014年计生工作总结
2014/11/21 职场文书
党性分析材料格式
2014/12/19 职场文书
安全生产先进个人总结
2015/02/15 职场文书
学雷锋活动简报
2015/07/20 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
python在package下继续嵌套一个package
2022/04/14 Python
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技
MySQL数据库 安全管理
2022/05/06 MySQL