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

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

先看看界面:

二话不说, 先实现界面:

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

 }
})

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

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

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

(0)

相关推荐

  • 微信小程序如何使用云开发

    微信小程序中的云开发想必大家还不是很熟悉,因为云开发也就是9月份上线的,相比之前大家对于数据库的存储都是用的是自己的服务器,接下来这篇文章主要为大家介绍下怎么使用云开发,网上看过很多文章感觉介绍的不是很详细,下面通过我个人亲身经历整理下自己的思路吧. 首先介绍下云开发主要的三大特点,目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库 存储:在小程序前端直接上传/下载云

  • 小程序云开发初探(小结)

    云开发是微信平台新开放的功能,为开发者提供集成了服务器,数据库和资源存储的云服务.本文将基于官方文档,以一个小例子来作为探索云开发的相关功能. 云开发官方文档 一.新建云开发项目新建项目 将微信开发助手更新之后,选择云开发模板. 项目目录 项目目录分为了2大块内容:cloudfunctions(云函数)和miniprogram.miniprogram存放的是和普通开发相同的业务代码和资源,cloudfunctions中则存放了可以上传至云端的代码,在云开发中被称为云函数. 云开发模板建立之后,会

  • 小程序云开发实战小结

    1. 云开发简介 由于小程序本身存储数据的能力有限,所以不可能将大量的数据保存在客户端,而且将数据保存在本地既不安全,也无法与其他小程序用户共享,所以大多数小程序都需要一个服务端,服务端可以用多种技术实现,如PHP.Node.js.Python.ASP.NET.Java EE等.不管使用哪种技术实现服务端,开发一款小程序都需要至少配备两个程序员,一个是开发小程序的程序员,一个是开发服务端的程序员.而且这两个程序员之间还需要不断沟通,以便确认共同遵循的接口. 开发一款小程序需要两名或更多的程序员参

  • 微信小程序云开发详细教程

    微信小程序云开发之初体验,供大家参考,具体内容如下 小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:既可在小程序前端操作,也能在云函数中读写的 JSON 数据库,免费2G容量 存储:可在小程序前端上传/下载云端文件,在云开发控制台可视化管理,免费5G容量 上手体验 打开微信开发者工具,新建

  • 微信小程序云开发使用方法新手初体验

    今天看到微信推送了一条小程序云上线通知,作为一个前端er,满怀期待的去看了看,很不错先看看文档上怎么说的: 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力,6的一匹. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥.(就是说以后老板让你做小程序,连个后台的人都不用给你配了,自己搞定就行了). 目前提供三大基础能力支持: 云

  • 微信小程序云开发之使用云存储

    上一节为大家介绍了下云开发的搭建,接下来为大家介绍下怎么使用云存储,顾名思义,云存储当然就是我们平常所说的百度网盘用来存储自己的资源,当然我们这里的云存储不仅可以存储自己的素材还可以在云数据库调用自己云存储的数据,这既是云开发的一大特色之处吧,话不多说直接说下周末操作吧. [步骤] 1.打开我们的云开发然后点击存储管理如下所示 2.到存储管理这里我们可以上传文件,如下所示 我们点击上传文件可以从本地把自己的文件上传到这里,值得注意的是在自己上传文件的时候尽量取好名字,这样会减少自己操作的负担.说

  • 微信小程序云开发之新手环境配置

    本文实例为大家分享了微信小程序云开发环境配置的具体方法,供大家参考,具体内容如下 注意:小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能. 首先我们新建小程序项目,填写申请的appID如果没有需要注册一个,微信为我们提供了一个云开发快速启动的模板,这里我们勾选进去看看云开发为我们提供的案例. 首次进入控制台会报cloud init error (云初始化错误). 如果我们填写了在微信的左上角调试器旁边有一个云开发,在这里我们点击云开发 点击开通云开发 官网建议我们建两

  • 小程序云开发部署攻略(图文教程)

    写在前边 微信小程序的云开发功能刚刚上线,笔者小试一把,看看是不是真的可以一人搞定小程序的开发,而不需要再去伺候一个后台了,虽然不难,但是还是废了一些周折,特此记录一下,旨在帮助大家真正快速部署成功,可以潜心研究他的api,减少各位大佬的磨刀时间.打官腔的话就不多说了,官方文档的措辞已经很优美了,云开发官方文档 step1,更新微信开发者工具至最新版 这里注意一下,不要在微信开发者工具上边直接检测更新,因为目前检测出来的并不是最新版本,当然也不具备云开发的能力,有图为证: 而官网更新的版本是这样

  • 微信小程序云开发之使用云函数

    在之前的几篇文章里面介绍了下云开发中的云数据库.云存储: 微信小程序如何使用云开发 微信小程序之使用云存储 微信小程序之使用云数据库 接下来的这篇文章主要介绍下云函数,介绍这个云函数的主要用途是因为要解决从云数据库查询数据最多显示20条的限制,而使用到云函数可以解决这种限制,使用云函数可以将最大限制改为100条,继而达到我们需要的效果. [步骤] 简单说一下我们如何创建云函数,如下所示 >我们右击cloudfunctions出现如下图所示,点击新建Node.js函数即可 >创建好云函数后我们需

  • 微信小程序云开发之使用云数据库

    在上一节我们介绍了下怎么使用云存储来存储我们需要的数据,接下来这节也是我们在实际开发比较重要的东西数据库,首先数据库当然是我们要显示在前端界面上的内容,如果要使用云存储+云数据库该如何操作呢,下面我来详细为大家介绍下具体流程 [步骤] 首先我们打开云开发然后点击数据库,自己在数据库这里新建一个集合(我的建的集合叫做videos),如下 tempFileURL是我们在云存储里面保存的数据,然后下面的链接就是我们之前所说的详情里面的下载地址如下所示 我们只需要将我们详情界面中的下载地址copy粘贴到

随机推荐