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

已于 2022-03-31 10:12:53 修改 2340 收藏 19
文章标签： 微信小程序 小程序
于 2022-03-30 21:47:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45802978/article/details/123857825
版权

前端代码：

<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.openid
    this.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.openid
     this.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,//临时路径:filepath
          success: 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);
            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, // 默认9
      sizeType: ['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, // 默认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) {
          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.openid
     this.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,//临时路径:filepath
          success: 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>

实现的效果：在这里插入图片描述

小神龙哈哈哈
关注
  • 3
    点赞
  • 踩
  • 19
    收藏
  • 打赏
    打赏
  • 8
    评论
微信小程序 云开发 提交表单数据和表单里上传的多张图片一起提交到数据库里完整代码
qq_45382502的博客
01-16 2657
JS代码： const db = wx.cloud.database() Page({ data: { xingming: '', xingbie: '', aihao: [], flog: true, imageList: [], }, formSubmit: function (e) { console.log("ad", e.detail.value); var that = this
小程序云开发如何实现图片上传及发表文字
10-16
主要为大家详细介绍了小程序云开发教程，如何实现图片上传及发表文字，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 怎么插入图片？image组件的使用教程。
最新发布
贼厉害
02-06 4046
是小程序中一个图片的组件image组件有一个默认宽度和高度（宽300px，高240px）支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0起支持云文件ID。我们先添加一个image组件给他一个边框看看他的默认情况我们从图中可以看出，我什么都没加有一个基础的框框大小（宽300px，高240px）属性类型默认值必填说明最低版本srcstring否图片资源地址1.0.0modestring否图片裁剪、缩放的模式1.0.0webpbooleanfalse否。
小程序云开发 上传图片到云存储
YL
02-16 5704
在学习了小程序云开发后，遇到了开发中常见的图片上传，今天简单的记录总结下在云开发中如何实现图片上传到云存储中。
微信小程序选择多张图片连同表单中其他信息一起上传并保存到MySQL数据库
@Banana的博客
04-03 4045
多读多写多记录，多学多练多思考。----------- Banana• Banuit Gang(BUG香柚帮) 最近在做小程序的多图片上传+连同表单信息和图片服务器端地址一起保存到数据库中这项功能，但是发现小程序只支持一张一张的图片上传，即使用递归或者循环都必须调用多次上传图片的方法，如果上传图片时连同表单一块提交持久化到数据库，那么就会保存多条记录，想了又想，最终思路就是把上传图片和提交...
微信小程序云开发入门（摆脱后台自己实现后台数据）
09-29
微信小程序开发实战入门，学习小程序云开发，摆脱后台，自己实现后台数据，从此就可以愉快的写小程序，自己实现小程序后台了。
微信小程序图片上传至mysql数据库
jidaotianzun的博客
03-25 2326
请问微信小程序在使用wx.chooseImage获取到本地图片的临时地址后，如何才能将图片信息上传至mysql数据库中。并且在微信小程序前端请求后能从数据库中获取到图片的信息并显示在页面上？？？
微信小程序云开发上传图片和更新图片操作
rb0518的博客
08-28 3079
在微信小程序使用云开发上传图片是非常简单的，我们只需要调用对应的api即可。
微信小程序笔记 云开发 上传图片到云数据库 基础（wx.chooseImage、wx.cloud.uploadFile）
weixin_43826681的博客
07-23 7962
wx.chooseImage和wx.cloud.uploadFile是小程序上传图片到云数据库的两个很重要的函数。 其中，wx.chooseImage函数的作用是选择要上传的图片、wx.cloud.uploadFile函数的作用的将文件上传到云数据库中。 它们的详细参数可以在微信官方文档中查到： 下面举几个示例来看看这两个函数的用法： 一、wx.chooseImage函数的返回值 示例： wxml： <button type="primary" bindtap="uploadPhoto" >
小程序云开发实现上传图片功能
热门推荐
Cheny_Yang的博客
04-04 1万+
1、小程序上传图片功能实现需要注意以下几个点： （1）图片最多上传9张（默认） （2）上传后的图片会生成一个临时的地址，用过这个临时地址将图片上传到数据库 （3）图片保存的位置是在云开发控制台的 本地存储中 （4）图片只能是一张一张的上传 （5）保存在本地存储中的图片不能重名 （6）可以使用js中的new Date().getTime()返回一个毫秒值作为图片的名称，这个毫秒值是不会重复的 （7）...
13、微信小程序：上传图片到服务器
weixin_47886206的博客
11-23 2010
微信小程序：上传图片到服务器
微信小程序多图片上传至SFTP服务器（后台通过SpringMVC进行图片接收）
Dahr Allen的博客
05-31 1847
前言 由于之前写过一篇关于微信小程序图片上传到后台的文章参考《微信小程序上传图片到服务器（java后台以及使用springmvc）》，有读者反馈关于多图片上传的问题，所以博主决定另外写一篇关于微信小程序多图片上传的文章，但是如果只是单纯写多图片上传的话，感觉上有点单调，因此决定结合上传至SFTP服务器来写这一篇文章，关于SFTP服务器的搭建请参考《CentOS通过使用自带SSH服务结合Nginx...
小程序图片src本地服务器路径,微信小程序 图片加载（本地，网路）实例详解...
weixin_39625563的博客
07-30 4563
微信小程序 图片加载(本地，网路)实例详解发布时间：2020-08-23 22:53:03来源：脚本之家阅读：361作者：Coco-LG在微信小程序中，要显示一张图片，有两种图片加载方式：加载本地图片加载网络图片加载本地图片src="/image/arrowright.png"这句就是加载本地图片资源的。想想iOS中的加载本地图片，imageName:,类似。加载网络图片微信在加载网络这方面封装的...
微信小程序上传图片到阿里云存储
第九系艾文
05-26 1511
文章目录前言一、微信小程序上传方法二、阿里云OSS1.配置跨域访问（参考文档）2.获取上传签名（重点）三、微信小程序封装上传方法测试总结 前言 小程序业务，涉及到上传图片的功能，刚开始使用的是腾讯低代码平台，发现上传很方便，无需关注逻辑，但是有很多潜在的问题，无法定制开发。之前使用过阿里云的OSS，感觉还可以，就打算直接上手，在微信小程序环境内上传文件到阿里云存储。 本次是通过服务器生成签名，客户端拿着签名直接进行上传操作，减少客户端操作 一、微信小程序上传方法 微信小程序文件上传 官方文档。由于小程序
微信小程序之上传多张图片（云开发）
m0_45329584的博客
09-22 1万+
一、简介： 这篇文章向大家展示的是把图片上传到云数据库中，这是我做商城项目时研究的。大家都知道，云开发是没有后端开发的，所有图片我们要放到云数据库中。 二、素材图： ： 三、效果图： 四、代码： wxml： <!--miniprogram/pages/fb/fb.wxml--> <view class='pages'> <view class='top'&gt...
小程序加载本地图片解决方案
cheer6up的博客
05-14 2149
小程序加载本地图片： https://www.cnblogs.com/greengage/p/7742106.html
微信小程序云开发入门-数据库插入数据（包含批量）
SuperYang的博客
10-21 2583
本文简单介绍了小程序云开发中插入数据以及批量插入数据的常用做法，希望能够给你带来一定的帮助。
0基础——微信小程序上传图片到云开发存储中，并将http地址存储到云开发的数据库中
lzh的博客
01-26 4732
新建一个小程序项目，我选的不使用云开发（自己之后加相关云开发的配置） 相关配置 app.js配置初始化 // app.js App({ onLaunch() { wx.cloud.init({ env: "自己的env" }) } }) 获取自己的env 云开发新建一个数据库列表 wxml页面 <input placeholder="输入姓名" bindinput="addName"></input> <input placehol
mysql 一个字段下保存多张张照片_mysql索引
weixin_39551611的博客
11-27 1146
一、MySQL 索引介绍1、什么是索引 索引(Index)是帮助MySQL高效获取数据的数据结构。其功能是帮助我们快速匹配查找到需要的数据行，是数据库性能优化最常用的工具之一。其作用相当于超市里的导购员、书本里的目录、类似大学图书馆建书目索引，可以提高数据检索的效率，降低数据库的IO成本。MySQL一般在300万条记录左右性能会开始逐渐下降(官方文档是500~800w记录)，在大数据量...
mysql 一个字段下保存多张张照片_Mysql索引
weixin_39737831的博客
12-01 530
索引为什么能加快查询？数据库中最常见的慢查询优化方式是什么？为什么加索引能优化慢查询？哪些数据结构可以提高查询速度？既然这些数据结构能优化查询速度，mysql为什么选择使用B+树？索引放在哪？磁盘or内存？：磁盘，只不过sql查询的时候需要把磁盘里的索引加载到内存。索引是什么？索引是帮助Mysql高效获取数据的数据结构索引存储在文件系统中索引的文件存储形式与存储引擎有关innoDB：磁盘作为存储介...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小神龙哈哈哈

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值