微信小程序怎么给数据库的一个记录里新增图片数据？

前端代码：

<view class="row"><view class="text1">证件照：</view><image class="zp"  src="{{zjz}}" mode="aspectFill" name="zhengjianzhao"></image><button class="upload-img-btn" bindtap="chooseImg" type='primary'>拍照  / 上传</button></view>

js代码：

// pages/xggrzl/xggrzl.js
const db = wx.cloud.database()
const app = getApp()
Page({/*** 页面的初始数据*/data: {openid: '',userInfo: '',array: ["大一", "大二", "大三", "大四"],array1: ["计算机科学与工程学院", "电子信息工程学院"],xy_index: 0,nj_index: 0,imgs:[],zjz: '',img: ''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {const app = getApp()var openid = app.globalData.openidthis.setData({openid: openid})db.collection("user").where({ openid: this.data.openid }).get().then(res => {console.log(res.data)this.setData({userInfo: res.data})console.log(this.data.userInfo[0].nj)for (let i = 0; i < this.data.array.length; i++) {if (this, this.data.array[i] == this.data.userInfo[0].nj) {console.log(i)this.setData({nj_index: i})}}for (let i = 0; i < this.data.array1.length; i++) {if (this, this.data.array1[i] == this.data.userInfo[0].xy) {console.log(i)this.setData({xy_index: i})}}})},// 上传一张图片chooseImg: function (e) {/* const app = getApp()var openid = app.globalData.openidthis.setData({openid: openid})db.collection("user").where({ openid: this.data.openid }).get().then(res => {console.log(res.data)this.setData({userInfo: res.data})if(res.data.openid==app.globalData.openid){*/var that = this;let openid = app.globalData.openid || wx.getStorageSync('openid');console.log(openid)// const filepath=this.data.imgwx.chooseImage({count: 1,sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {console.log(res.tempFilePaths)let filePath = res.tempFilePaths[0]wx.cloud.uploadFile({cloudPath: (new Date()).valueOf() + '.png',//文件名 //云存储图片名字filePath,//临时路径:filepathsuccess: res => {console.log('[上传图片] 成功：', res)console.log(res.fileID)that.setData({img: res.fileID,//云存储图片路径,可以把这个路径存到集合，要用的时候再取出来// zjz:res.tempFilePathszjz: res.fileID})let fileID = res.fileID;// that.upload(res.fileID);db.collection("user").add({data: {zjz: fileID//数据库会新增一个记录//  zjz:filePath//数据库不会新增一个记录// zjz:this.data.concat(filePath)}})},fail: err => {// handle error}})// }// })}})},/* upload(filepath) {console.log(filepath)db.collection("user").add({data: {zjz: filepath,}}).then(res => {wx.showToast({title: '添加成功',icon: 'success',duration: 2000})})}})// const db = wx.cloud.database();
*//*chooseImg: function (e) {var that = this;const app = getApp()var openid =app.globalData.openid// let openid = app.globalData.openid || wx.getStorageSync('openid');wx.chooseImage({// filePath: filePath, // 文件路径count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {console.log(res.tempFilePaths)//   const tempFilePaths=res.tempFilePaths// tempFilePath可以作为img标签的src属性显示图片let filePath = res.tempFilePaths[0]// const name = Math.random() * 1000000;//  const cloudPath = name + filePath.match(/\.[^.]+?$/)[0]wx.cloud.uploadFile({cloudPath: "证件照",//文件名 //云存储图片名字filePath: filePath,//临时路径success: res => {console.log('[上传图片] 成功：', res)console.log(res.fileID)that.setData({zjz: res.fileID,//云存储图片路径,可以把这个路径存到集合，要用的时候再取出来// zjz:res.tempFilePaths})}})let fileID = res.fileID;//把图片存到user集合表const db = wx.cloud.database();// db.collection("user").where({openid:app.globalData.openid}).get().then(res=>{//   console.log(res)db.collection("user").add({data: {// zjz: this.data[0],zjz:fileID}, })// })//     success: function () {//       wx.showToast({//        title: '图片存储成功',//         'icon': 'success',//         duration: 3000//       })//     },//     fail: function () {//       wx.showToast({//         title: '图片存储失败',//         'icon': 'none',//        duration: 3000//       })//     }//   });// },// fail: e => {//   console.error('[上传图片] 失败：', e)// },// complete: () => {// }// })}  // },})},*//* chooseImg: function (e) {var that = this;var imgs = this.data.imgs;if (imgs.length >= 9) {this.setData({lenMore: 1});setTimeout(function () {that.setData({lenMore: 0});}, 2500);return false;}wx.chooseImage({// count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;var imgs = that.data.imgs;// console.log(tempFilePaths + '----');for (var i = 0; i < tempFilePaths.length; i++) {if (imgs.length >= 9) {that.setData({imgs: imgs});return false;} else {imgs.push(tempFilePaths[i]);}}// console.log(imgs);that.setData({imgs: imgs});}});
},
// 删除图片
deleteImg: function (e) {var imgs = this.data.imgs;var index = e.currentTarget.dataset.index;imgs.splice(index, 1);this.setData({imgs: imgs});
},
*/bindchangenj: function (e) {console.log(e.detail.value)this.setData({nj_index: e.detail.value})},bindchangexy: function (e) {console.log(e.detail.value)this.setData({xy_index: e.detail.value})},formSubmit(e) {console.log(e)db.collection("user").where({ openid: this.data.openid }).update({data: {nj: this.data.array[this.data.nj_index],phone: e.detail.value.phone,username: e.detail.value.name,xy: this.data.array1[this.data.xy_index],studentid: e.detail.value.xh,// tx:e.detail.value.userphoto,// zhengjianzhao: e.detail.value.zjz,// zhengjianzhao:e.data.imgs,_updateTime: Date.parse(new Date()),},success: function (res) {wx.showToast({title: '提交成功',icon: 'success',duration: 1500,success: function () {wx.navigateTo({url: '../grzl/grzl',})}})}})},// 上传多张图片// chooseImg: function (e) {//   var that = this;// var imgs = this.data.imgs;// if (imgs.length >= 9) {//   this.setData({//     lenMore: 1//   });//   setTimeout(function () {//     that.setData({//       lenMore: 0//     });//   }, 2500);//   return false;// }// wx.chooseImage({//   count: 1, // 默认9//   sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有//   sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有//   success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片// var tempFilePaths = res.tempFilePaths;// var imgs = that.data.imgs;// console.log(tempFilePaths + '----');// for (var i = 0; i < tempFilePaths.length; i++) {//   if (imgs.length >= 9) {// console.log(res)//   that.setData({//     // imgs: imgs//     zjz:res.tempFilePaths[0]//   });// return false;// } else {//   imgs.push(tempFilePaths[i]);// }// }// console.log(imgs);// that.setData({//   imgs: imgs// });// }//   })// },// 删除图片// deleteImg: function (e) {//   var imgs = this.data.imgs;//   var index = e.currentTarget.dataset.index;//   imgs.splice(index, 1);//   this.setData({//     imgs: imgs//   });// },// 预览图片// previewImg: function (e) {//   //获取当前图片的下标//   var index = e.currentTarget.dataset.index;//   //所有图片//   var imgs = this.data.imgs;//   wx.previewImage({//     //当前显示图片//     current: imgs[index],//     //所有图片//     urls: imgs//   })// },/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

目前实现的效果

数据库中的记录如下：

每上传一次图片就会在数据库中增加一条记录，我希望上传一次之后它可以添加到user数据库中的第一条记录中（第一条记录有zjz这个字段）

求问怎么把获取到的这个“zjz”字段放进去userinfo记录中？

20220331上午更新：
昨晚睡前也还是查了很多资料，回宿舍路上想到我应该在更新中直接上传就可以，所以把插入数据库操作注释掉了，然后一直试更新操作中的数据，突然就成功写入数据库了。
js代码：

// 上传一张图片chooseImg: function (e) {/* const app = getApp()var openid = app.globalData.openidthis.setData({openid: openid})db.collection("user").where({ openid: this.data.openid }).get().then(res => {console.log(res.data)this.setData({userInfo: res.data})if(res.data.openid==app.globalData.openid){*/var that = this;let openid = app.globalData.openid || wx.getStorageSync('openid');console.log(openid)// const filepath=this.data.img// 选择图片wx.chooseImage({count: 1,sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {console.log(res.tempFilePaths)let filePath = res.tempFilePaths[0]// 上传图片wx.cloud.uploadFile({cloudPath: (new Date()).valueOf() + '.png',//文件名 //云存储图片名字filePath,//临时路径:filepathsuccess: res => {console.log('[上传图片] 成功：', res)console.log(res.fileID)that.setData({img: res.fileID,//云存储图片路径,可以把这个路径存到集合，要用的时候再取出来// zjz:res.tempFilePaths// zjz: res.fileID})// let fileID = res.fileID;// that.upload(res.fileID);//如果存在这句话，下文用zjz：fileID数据库也不会新增记录// db.collection("user").add({// data: {//  zjz: fileID//数据库会新增一个记录//  zjz:filePath//数据库不会新增一个记录// zjz:this.data.concat(filePath)// }// })},fail: err => {// handle error}})// }// })}})},

formSubmit(e) {console.log(e.detail.value)db.collection("user").where({ openid: this.data.openid }).update({data: {nj: this.data.array[this.data.nj_index],phone: e.detail.value.phone,username: e.detail.value.name,xy: this.data.array1[this.data.xy_index],studentid: e.detail.value.xh,// tx:e.detail.value.userphoto,zjz:this.data.img,// zhengjianzhao:e.data.imgs,_updateTime: Date.parse(new Date()),},success: function (res) {wx.showToast({title: '提交成功',icon: 'success',duration: 1500,success: function () {wx.navigateTo({url: '../grzl/grzl',})}})}})},

前端

<view class="row"><view class="text1">证件照：</view><image class="zp"  src="{{userInfo[0].zjz}}" mode="aspectFill" name="zjz"></image><button class="upload-img-btn" bindtap="chooseImg" type='primary'>拍照  / 上传</button></view>

实现的效果：

微信小程序怎么给数据库的一个记录里新增图片数据？相关推荐

新手如何用微信小程序和云数据库做一个论坛？【帖子页】
新手小白用微信小程序和云数据库做一个论坛[帖子页] 先放个效果图由于后面换了头像,所以评论的头像和发帖的头像不一样. 要做个同款论坛,首先需要用到云数据库.在微信开发者工具的左上角开通云开发就可以了 ...
微信小程序mysql查询_微信小程序云开发数据库操作查询记录
官方文档解读: 查询记录 1. 打开 pages/databaseGuide/databaseGuide.js 文件,定位到 onQuery 方法 2. 把注释掉的代码解除注释,onQuery 方法会 ...
微信小程序：后台数据库与云数据库对比取最后一个值并且取用定时更新
微信小程序:后台数据库与云数据库对比取最后一个值并且取用定时更新的方式来现在在前端网页上我们有时候会遇到这样的问题,在后台数据库提取到数据后想要提取他们中的某些有共同特征的一些数据,这时候我们就可以 ...
微信小程序+云开发+数据库使用
微信小程序+云开发+数据库使用参考地址:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.ht ...
微信小程序+阿里云+stm32f407的一个项目
** 微信小程序+阿里云+stm32f407的一个项目## 小程序参考了大神半颗心脏的博客和资料, 小程序多个页面推送数据因为自己做小程序是类似商城的一个demo, 其中数据需要与单片机进行交互,而 ...
微信小程序云开发数据库网页管理后台
目录一.前言使用云开发来开发微信小程序提供云数据库.云存储.云函数.云调用等支持,可以快速配置云端环境进行开发,但暂时并没有提供好的运维解决方案.了解到微信小程序官方文档中提供了云开发HTTP A ...
微信小程序怎么取mysql,微信小程序怎么读取数据库?小程序如何读取数据?
微信小程序怎么读取数据库?小程序如何读取数据?各位微信用户们,如果你再开发微信小程序的过程中,需要微信小程序读取数据库的话,就跟着小编往下看微信小程序怎么读取数据库. 微信小程序怎么读取数据库? 微信 ...
uniapp实现微信小程序云开发数据库访问，并解决云开发数据库获取不到数据问题
uniapp实现微信小程序云开发数据库访问,并解决云开发数据库获取不到数据问题使用工具是HBuilder X 1.配置好AppID(小程序ID) 在HBuilder X工具的manifest.js文 ...
关于微信小程序云开发数据库中有数据查询不到的问题
最近在学习过程中遇到一个微信小程序云开发数据库中有数据查询不到的问题集合查询代码如下: Page({/* 采用了ES6的写法 */onLoad() {wx.cloud.database().coll ...

微信小程序怎么给数据库的一个记录里新增图片数据？

微信小程序怎么给数据库的一个记录里新增图片数据？相关推荐

最新文章

热门文章