小程序云開(kāi)發(fā)如何實(shí)現(xiàn)圖片上傳及發(fā)表文字
微信給了我們存儲(chǔ)空間以及圖片上傳的功能,我們?cè)趺纯梢暂p易放過(guò)呢?
先看看界面:

二話不說(shuō), 先實(shí)現(xiàn)界面:
<!--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'> 發(fā)布</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%;
}
接下來(lái)就是js的代碼了:
我們要求發(fā)布的人必須是已登錄狀態(tài),這個(gè)可以查看本地是否有username得知
// pages/pulish/pulish.js
var app = getApp()
const db = wx.cloud.database()
const _ = db.command;
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
text: '',
imgUrl: '',
count: 0
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
this.getCount()
},
onShow: function(){
let userOpenId = wx.getStorageSync('openId')
if (!userOpenId) {
wx.showToast({
title: '您還未登錄,請(qǐng)先登錄~',
icon: 'none'
})
setTimeout(() => {
wx.switchTab({
url: '../me/me',
})
}, 1500)
} else {
console.log(userOpenId)
}
},
getCount: function(){
//已輸入的字?jǐn)?shù)
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), //將圖片儲(chǔ)存為數(shù)組類型
content: this.data.text, //用戶輸入的文字
comment: [],
userId: wx.getStorageSync('userId'),
username: wx.getStorageSync('username'), //用戶名
id: Number(this.data.count) +1, //是現(xiàn)在數(shù)據(jù)庫(kù)的條數(shù)+1,微信小程序的不知道怎么設(shè)置自增的數(shù)字字段
shareNum: 0,
commentNum: 0,
validStatus: 0,
validTime: 0
}
//validStatus: 審核狀態(tài), 通過(guò)時(shí)候 +1, 反對(duì)時(shí)候-1
//validTime: 審核次數(shù), 最多5次,如果反對(duì)的人大于等于3,則不通過(guò)
console.log(data)
if (data.content){
db.collection('funnys').add({
data: data,
success:res => {
wx.showToast({
title: '發(fā)布成功',
})
setTimeout(()=>{
wx.switchTab({
url: '../index/index',
})
}, 1000)
},
fail: e=>{
wx.showToast({
title: '發(fā)布錯(cuò)誤',
})
console.log(e)
}
})
}else{
wx.showToast({
title: '請(qǐng)?zhí)顚?xiě)文字',
icon: 'none'
})
}
},
// 上傳圖片
//上傳的時(shí)候,我們可以獲得一個(gè)fileId,這個(gè)id我們必須存起來(lái),在別人查看的時(shí)候,image的src使用的就是fileId,然后用戶必
//須得知道上傳的是哪張圖片呀, 所以我們使用的是本地的圖片路徑來(lái)展示,即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]
//改寫(xiě): 數(shù)組 多圖片
// 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)
}
})
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
到此為止,功能就實(shí)現(xiàn)了。
那么,到此為止,點(diǎn)贊功能就基本完成了, 請(qǐng)看詳細(xì)代碼
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap Multiselect 常用組件實(shí)現(xiàn)代碼
bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件,我們一般用來(lái)請(qǐng)求后臺(tái)返回具有l(wèi)abel和text對(duì)象的json數(shù)組即可渲染。接下來(lái)通過(guò)本文給大家分享Bootstrap Multiselect 常用組件實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2017-07-07
Extjs4實(shí)現(xiàn)兩個(gè)GridPanel之間數(shù)據(jù)拖拽功能具體方法
這篇文章主要介紹了Extjs4實(shí)現(xiàn)兩個(gè)GridPanel之間數(shù)據(jù)拖拽功能具體方法,有需要的朋友可以參考一下2013-11-11
基于canvasJS在PHP中制作動(dòng)態(tài)圖表
這篇文章主要介紹了基于canvasJS在PHP中制作動(dòng)態(tài)圖表,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
innerText innerHTML的用法以及注意事項(xiàng) [推薦]
我們常常需要使用另外一些對(duì)象的屬性來(lái)實(shí)現(xiàn)動(dòng)態(tài)改變其中的文本,它們就是:innerText,outerText,innerHTML,outerHTML,千萬(wàn)要注意它們的大小寫(xiě),因?yàn)殄e(cuò)一點(diǎn)您就得不到預(yù)期的效果了。2009-05-05
使用JavaScript字符串解決回文數(shù)的方案詳解
這篇文章主要介紹了使用JavaScript字符串解決回文數(shù)的方案,JavaScript中的字符串是一種數(shù)據(jù)類型,用于表示文本數(shù)據(jù),字符串可以包含任意字符序列,包括字母、數(shù)字、符號(hào)和空格,靈活掌握字符串的解決問(wèn)題思想,巧用字符串解決回文數(shù),需要的朋友可以參考下2024-05-05
JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息)
下面小編就為大家分享一篇JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12

