上传图片的js代码片段,觉得自己代码的没错,也能打印出来上传的图片地址,但是发现并没有存进数据库,求大神指点
chooseImage: function(event) {
wx.chooseImage({
count: 9,
success: function (res) {
// 设置图片
that.setData({
images: res.tempFilePaths,
})
that.data.images = []
console.log(res.tempFilePaths)
for (var i in res.tempFilePaths) {
// 将图片上传至云存储空间
wx.cloud.uploadFile({
// 指定要上传的文件的小程序临时文件路径
cloudPath: that.timetostr(new Date()),
filePath: res.tempFilePaths[i],
// 成功回调
success: res => {
that.data.images.push(res.fileID)
},
})
}
},
})
},
js全代码
var that
const db = wx.cloud.database();
Page({
/**
* 页面的初始数据
*/
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo'),
content: '',
images: [],
user: {},
isLike: false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
that = this
that.jugdeUserLogin();
},
/**
* 获取填写的内容
*/
getTextAreaContent: function(event) {
that.data.content = event.detail.value;
},
/**
* 选择图片
*/
chooseImage: function(event) {
wx.chooseImage({
count: 9,
success: function (res) {
// 设置图片
that.setData({
images: res.tempFilePaths,
})
that.data.images = []
console.log(res.tempFilePaths)
for (var i in res.tempFilePaths) {
// 将图片上传至云存储空间
wx.cloud.uploadFile({
// 指定要上传的文件的小程序临时文件路径
cloudPath: that.timetostr(new Date()),
filePath: res.tempFilePaths[i],
// 成功回调
success: res => {
that.data.images.push(res.fileID)
},
})
}
},
})
},
/**
* 图片路径格式化
*/
timetostr(time){
var randnum = Math.floor(Math.random() * (9999 - 1000)) + 1000;
var str = randnum +"_"+ time.getMilliseconds() + ".png";
return str;
},
/**
* 发布
*/
formSubmit: function(e) {
console.log('图片:', that.data.images)
this.data.content = e.detail.value['input-content'];
if (this.data.canIUse) {
if (this.data.images.length > 0) {
this.saveDataToServer();
} else if (this.data.content.trim() != '') {
this.saveDataToServer();
} else {
wx.showToast({
icon: 'none',
title: '写点东西吧',
})
}
} else {
this.jugdeUserLogin();
}
},
/**
* 保存到发布集合中
*/
saveDataToServer: function(event) {
db.collection('topic').add({
// data 字段表示需新增的 JSON 数据
data: {
content: that.data.content,
date: new Date(),
images: that.data.images,
user: that.data.user,
isLike: that.data.isLike,
},
success: function(res) {
// 保存到发布历史
that.saveToHistoryServer();
// 清空数据
that.data.content = "";
that.data.images = [];
that.setData({
textContent: '',
images: [],
})
that.showTipAndSwitchTab();
},
})
},
/**
* 添加成功添加提示,切换页面
*/
showTipAndSwitchTab: function(event) {
wx.showToast({
title: '新增记录成功',
})
wx.switchTab({
url: '../home/home',
})
},
/**
* 删除图片
*/
removeImg: function(event) {
var position = event.currentTarget.dataset.index;
this.data.images.splice(position, 1);
// 渲染图片
this.setData({
images: this.data.images,
})
},
// 预览图片
previewImg: function(e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
wx.previewImage({
//当前显示图片
current: this.data.images[index],
//所有图片
urls: this.data.images
})
},
/**
* 添加到发布集合中
*/
saveToHistoryServer: function(event) {
db.collection('history').add({
// data 字段表示需新增的 JSON 数据
data: {
content: that.data.content,
date: new Date(),
images: that.data.images,
user: that.data.user,
isLike: that.data.isLike,
},
success: function(res) {
// res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
console.log(res)
},
fail: console.error
})
},
/**
* 判断用户是否登录
*/
jugdeUserLogin: function(event) {
// 查看是否授权
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
that.data.user = res.userInfo;
console.log(that.data.user)
}
})
}
}
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
wxml全代码
<!--miniprogram/pages/marry/marry.wxml-->
<view class="content">
<form bindsubmit="formSubmit">
<view class="text-content">
<view class='text-area'>
<textarea name="input-content" type="text" placeholder="说点什么吧~" placeholder-class="holder" value="{{textContent}}" bindblur='getTextAreaContent'></textarea>
</view>
</view>
<scroll-view class="image-group" scroll-x="true">
<block wx:for='{{images}}' wx:for-index='idx'>
<view>
<image src='{{images[idx]}}' mode='aspectFill' bindtap="previewImg"></image>
<icon type='clear' bindtap='removeImg' data-index="{{idx}}" ></icon>
</view>
</block>
</scroll-view>
<view class='btn-func'>
<button class="btn-img" bindtap='chooseImage'>选择图片</button>
<button class="btn" formType='submit' open-type="getUserInfo">发布研论</button>
</view>
</form>
</view>