当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 小程序云开发如何实现图片上传及发表文字

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

2019年07月20日  | 移动技术网IT编程  | 我要评论

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

先看看界面：

二话不说， 先实现界面：

<!--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 () {

 }
})

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网