在线制作小程序_小程序云开发怎么完成图片上传

日期:2021-01-07 类型:行业动态 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

小程序云开发如何实现图片上传及发表文字       这篇文章主要为大家详细介绍了小程序云开发教程,如何实现图片上传及发表文字,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

先看看界面:

二话不说, 先实现界面:

 !--pages/pulish/pulish.wxml-- 
 view 
 view 
 textarea bindinput='textInput' placeholder- maxlength='500' placeholder='和大家一起分享你遇到的趣事,糗事吧' value='{{text}}' auto-focus auto-height /textarea 
 /view 
 view 
 image src='../../images/pic.png' bindtap='doUpload' /image 
 view bindtap='pulish' 发布 /view 
 /view 
 !-- wx:for='{{imgUrl}}' -- 
 view wx:if='{{imgUrl}}' 
 !-- view wx:for='{{imgUrl}}' class='{{imgUrl.length == 1 "imgUrlClass1": imgUrl.length == 2 "imgUrlClass2": imgUrl.length == 3 "imgUrlClass3": "imgUrlClass4"}}' -- 
 image src='{{imgUrl}}' mode="aspectFit" /image 
 !-- /view -- 
 /view 
 !-- image src='cloud://qiupihu-d1e452.7169-qiupihu-d1e452/1451.gif' /image -- 
 /view 

wxss:

/* pages/pulish/pulish.wxss */

接下来就是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)

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

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

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