微信小程序,在一个表单界面,将图片和其他数据一起存入云数据库中,怎么上传图片的存储路径 20C
  • 在小程序中,wxml中是一个表单,这个表单提交书籍信息, 包括书籍的图片,名称和价格,首先点击上传图片, 将在这个界面上预览显示出来图片, 之后填写名称和价格然后点击提交, 将数据存到云数据库,就是小程序云开发模式腾讯提供的云数据库,
  • 1.求一段JS代码来解决这个问题, 我搞不懂图片在预览之后怎么上传到云存储中, 然后取出图片的存储路径上传到数据库中? 重点是在一个页面中进行这个操作

2个回答

首先云数据库应该是指微信小程序自带的云数据库,首先你的问题有两个
一、图片上传云数据库
二、取出图片的存储路径上传到云数据库
图片说明

上图是图片上传云数据库的地址

图片说明

上图是图片地址进入数据链表的地址

接来下,我们上传JS端的代码

getdata(){
    let that = this;
    wx.chooseImage({    //这一段是上传图片
      sizeType:['original','compressed'],
      sourceType:['album','camera'],
      success:function(res){
        wx.showLoading({
          title:'上传中',
        });
        let filePath = res.tempFilePaths[0];
        wx.cloud.uploadFile({     //这一段是上传到云数据中的
          cloudPath:'mibao1d.jpg',
          filePath:filePath,    //这个就是图片的存储路径
          success:res => {
            console.log('[上传图片]成功:',res)
            that.setData({
                bigImg: res.fileID,
            });
            let fileID = res.fileID;
            let idas = that.data.idss
            console.log(that.data.bigImg)
            console.log(that.data.idss)
            const db = wx.cloud.database();
            db.collection('newdata').doc(that.data.idss).update({    //这个就把云数据的图片存储路径上传到数据链表中了
              data:{
                imginfo:fileID
              },
              success(res){
                db.collection('newdata').where({_id:that.data.idss}).get({   //以下是生成新的可以在微信小程序页面中调用的临时链接
                 success:function(res){
                  console.log(res)
                  wx.getImageInfo({     
                    src: res.data[0].imginfo,   
                    success: function (res) {
                      console.log('happening:',res.path) //这个是转换的临时链接res.path
                      db.collection('newdata').doc(that.data.idss).update({
                        data: {
                          imgdetail:res.path  //上传到数据库中
                        },    
                        success(res){},})
                     },
                     fail: function (res) {
                       console.log('failure')
                     }
                   })
                  }
                 })
                }
            })
          },
          fail: e => {
            console.error('[上传图片]失败:',e)
          },
          complete:() =>{
            wx.hideLoading()
          }
        });
      }
    })
  }
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
微信小程序数据添加到云数据库中
1:在云数据库中创建一个集合(数据表)   2:wxml: <form bindsubmit='res'> <view class="section"> <input maxlength="10" name="username" placeholder="" /> </view> &am
微信小程序云多图上传并存储路径到云数据库【二】
点击链接加入群聊【微信小程序❶群】: 先来看最终效果: 一: 写一个简单的界面,主要是利用小程序上传文件api接口来实现: <view class='pulishBtn' bindtap='doUpload' >上传</view> 二: js:doUpload函数: wx.chooseImage 选择图片的方式分为两种,拍照或者从相册选择图片。 wx.showLo...
微信上传图片和图片存储
原文链接: http://115.159.110.224:81/ivi/sys/myhref_viewThis.do?f_gid=AC20419796E846D28971C0B3F3D6A612&f_type=ly 1.存储图片文件名到字段,考虑到微信最多上传9张图片,此方法是可取的 2.将图片存储到文件表里,存储上传时对应表的主键。基于如此,给出下面两种方案。 1.存储文
微信小程序云数据库动态更新
微信小程序云数据库动态更新 微信云数据库取得某个记录数据后数据改变如何更新?找了很多都是静态数据更新,后来才发现小程序云数据库的字段名的变量写法是[变量名],所以这个写法大概是这个样子: task就是读取并改变过的由键值对组成的JSON对象 wxupdate:function(task){ var key = task._id; for (var p in task){ ...
微信小程序之使用云数据库
在上一节我们介绍了下怎么使用云存储来存储我们需要的数据,接下来这节也是我们在实际开发比较重要的东西数据库,首先数据库当然是我们要显示在前端界面上的内容,如果要使用云存储+云数据库该如何操作呢,下面我来详细为大家介绍下具体流程 【步骤】 >首先我们打开云开发然后点击数据库,自己在数据库这里新建一个集合(我的建的集合叫做videos),如下 首先tempFileURL是我们在云存储里面...
微信小程序之----上传图片
微信小程序上传图片用到的api wx.chooseImage(OBJECT) wx.previewImage(OBJECT) wx.uploadFile(OBJECT) 这几个基本的api的使用方法可以去看微信小程序的官方文档------------ 官方文档-------这里就不重复赘述了 在此谈几点开发中会遇到的问题: 1.wx.chooseImage(OBJECT) coun
小程序云数据库~增加数据
微信小程序开发实战入门,学习小程序云开发,摆脱后台,自己实现后台数据,从此就可以愉快的写小程序,自己实现小程序后台了。
微信小程序 上传图片
微信小程序 上传图片 upload:function(){ var that = this //选择上传图片 wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], su...
小程序云数据库~修改数据
微信小程序开发实战入门,学习小程序云开发,摆脱后台,自己实现后台数据,从此就可以愉快的写小程序,自己实现小程序后台了。
怎样用路径将图片存入mssql中
同上
微信小程序——表单
微信小程序的表单和web的表单很相似,如代码所示:<from bindsubmit="formSubmit" bindreset="formReset"> <text>联系人</text> <input vlaue="白木乔" ></input> <radio-group&g
【微信小程序】云数据库交互-增删改查
小程序的云开发模式,有提供一个云数据库,实际上不能算一个数据库,只能算是doc存储。里面创建的不是表,而是集合,所以,也称为云集合开发模式。 云数据库 官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html?q=swiper 官方提供的文档里不但有数据库操作,还有云函数,今日讲解一下数据库的交互问...
微信小程序云数据库的导出乱码
第一步;导出csv格式,现在导出的是乱码; 第二步;找到你导出的csv文件,用记事本打开,点击另存为csv,编码选择utf-8就可以了
微信小程序云数据库实现登录
微信小程序自带的云数据库的优势在于,不用搭建服务器和后端就可以直接调用数据库 云数据库配置: 假设环境ID:abss 数据库名为:abc 微信小程序自带的云数据库可以生成登录注册系统,以下是简单实现功能的示例代码: 登录界面如下: login.wxml页面: <view class='username_it...
微信小程序--分享界面自定义图片
微信小程序--分享界面自定义图片 一般小程序页面都会大于等于1页,每个页面右上角都会有分享功能,建议把以下方法封装到app.js文件,在页面直接调用该方法,避免重复代码,提高性能。(代码用到ES6语法,若不支持,请自行还原js) 1 //右上角分享功能 2 onShareAppMessage () { 3 return { ...
微信小程序 上传图片,人脸识别
今天我们来说一下人脸识别怎么实现,首先你要有一个可以就行人脸识别的服务器,阿里云百度云都可以,这里推荐使用百度云,因为百度云人脸识别的API接口全面升级到V3版本,并进行开放测试,意思就是说现在是免费的   ^_^。...
小程序云数据库的使用记录
1.要使用小程序云能力,在此之前需要先开通云服务。 在小程序端代码中,先调用wx.init.cloud({})方法将小程序与云数据库建立连接。 wx.init.cloud({})接收参数有env和traceUser,env指当前小程序所在的数据库云环境id,即一个小程序对应一个云环境。traceUser传入布尔值,是否记录当前访问用户。更多参数详见:https://developers.weixi...
表单上传图片存储到数据库
我要做一个向数据库写入数据的功能 数据项目有编号 名称之类的 其中有图片 rn想请教如何上传图片并将地址写在对应表单中 之后提交每一项都存入数据库
小程序云数据库~删除数据
微信小程序开发实战入门,学习小程序云开发,摆脱后台,自己实现后台数据,从此就可以愉快的写小程序,自己实现小程序后台了。
小程序云数据库~查询数据
微信小程序开发实战入门,学习小程序云开发,摆脱后台,自己实现后台数据,从此就可以愉快的写小程序,自己实现小程序后台了。
微信小程序图片
微信小程序不能利用本地图片作为背景图片,会报错,必须利用网络图片或者base64格式的图片格式 图片转base64的地址微信小程序中image标签默认有宽高,如果想设置图片按照宽高比,让高自适应, 给image标签设置成想要的百分比,利用mode=”widthFix”属性进行控制image{ width:75%; }<image src="../../images/login_logo_
怎么样实现图片与其他信息一起存储?
怎么样实现图片与其他信息一起存储?谢谢!!
请问怎么将一个图片存入数据库
是oracle的数据库。不知道怎么接收图片和怎么样放入数据库,
怎么将图片存入数据库?
我想将图片存入数据库!但是不知道怎么做?能详细介绍吗?rn多谢!!!
怎么将图片存入MYSQL数据库?
怎么将图片存入MYSQL数据库?
微信小程序-表单form
表单Form
微信小程序 表单 验证
表单分为两个主要部分,一个是客户提交的信息,一个是主要内容(内含文字和上传图片),完整源码见上一篇 功能:点击文字则向上划出文本输入框(点击完成的时候做判断,内容不为空),点击图片则打开上传图片, 思路: 1.前端布局给两个按钮  添加文字  bindtap='addTextTap'    上传图片   bindtap='chooseImg'     一个隐藏的视窗   通过tex...
php上传图片路径存入数据库
现在我的图片都在工程里面的image文件夹呢,我要怎么把它的路径存入数据库啊
怎么将图片存入数据库表中
我要将几张照片通过表单加入到数据库表相应的记录中.不知道怎么弄,各位帮帮忙.rn谢谢...
怎么将图片存入sql server中?
多谢!
微信小程序storage存储
storage是持久而非永久 数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为10MB。例如,当用户将小程序从微信中删除后,存储在storage中的数据随之清除。 storage 以用户维度隔离。 同一台设备上,A 用户无法读取到B 用户的数据。 举个例子,用户A和用户B在同一个设备上...
将图片路径存入数据库------求助
本来在HTML中是这样的:rn[code=HTML]rnrn[/code]rnrn然后Action接受了之后就变成了:rnrnrn请问大家有什么好的办法避免这种情况呢?我是想图片连着HTML标签塞到数据库中的。谢谢!
在微信小程序里上传图片到腾讯云的COS上存储桶
微信小程序内本地生成签名,并上传图片到腾讯云COS指定存储桶中,解决方案一
微信小程序多张图片和表单一起上传,验证表单及进度条的实现完整代码
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 效果图: 完整代码: &lt;!--pages/register/register.wxml--&gt; &lt;view class='top'&gt; &lt;view&gt;注 册 须 知 : &lt;/view&gt; &lt;/view&gt; &lt;view&gt;...
微信小程序,界面适配
小程序提供了rpx计量单位 这里解释下rpx 把所有界面界面宽度切分成750块,计算时候取块计算就达到了宽度适配! 直接贴源码 page{     height: 100%;     width:750rpx; } .lunbo{     width:750rpx;     height:25%;  } .items{
微信小程序下拉刷新界面
利用onPullDownRefresh函数设置下拉刷新功能 一、在app.json中,将window选项中的enablePullDownRefresh设为true "window":{ "enablePullDownRefresh":true }       或者在要刷新的界面的XXX.json中设置enablePullDownRefresh设为true 
微信小程序的界面介绍
最近微信小程序比较火,如何能凑个热度哪,或许这篇文章能帮到你。 官方开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017111 首先微信更新到最新版本,然后在发现界面的最下面有没有小程序这个选项,没有的话只能找别人给你传一下。 然后获得appid后,微信的开发界面如下,和前端的编程界面很像。 其实微信的开发
微信小程序登录注册界面
微信小程序登录注册界面 第一次接触微信小程序的开发,首先就是从前端的界面开始,我要做的是一个农场管理的微信小程序,大致包括登录、注册、主要功能界面这些,这里我就分享一下我的登录注册界面的设计和功能实现 Pages中的代码构成:xxx.js、xxx.json 、xxx.wxml、 xxx.wxss 首先登录界面 Login.wxml &lt;!-- 农场主登录 --&gt; &lt;vi...
微信小程序canvas在其他图片上画圆形图片
wx.downloadFile({ url: app.globalData.imgUrl2 + self.data.imgNumber+'.png', success(res0) { if (res0.statusCode === 200) { console.log(res0) var card=res0.tem...
怎么将数据存入数据库?
从图书借了不少教程,不过它们似乎都没说过怎么把数据存入数据库,说来说去都是怎么连接数据库,怎么用查询语句....rn网上找到的教程类的东西也千篇一律.rn请问大家,我怎样才可以将我想存的数据放入数据库?rn最好给个代码例子...rn还有书上那些数据库查询的例子,它们都没说数据库文件在哪,为什么就可以直接存取数据?rn先谢谢啦!
相关热词 c# stream 复制 android c# c#监测窗口句柄 c# md5 引用 c# 判断tabtip 自己写个浏览器程序c# c# 字符串变成整数数组 c#语言编程写出一个方法 c# 转盘抽奖 c#选中treeview