微信小程序,在一个表单界面,将图片和其他数据一起存入云数据库中,怎么上传图片的存储路径 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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
原生微信小程序的图片上边怎样添加一个按钮
-
微信小程序扫普通二维码进小程序,用微信扫,404 not found nginx ,用小程序扫正常
-
微信小程序--页面删除数据后实现自动刷新页面
-
微信小程序view设置图片背景
-
微信小程序后台连接数据库
-
微信小程序表单提交值为undefined
-
微信小程序如何获取公众号内容列表并在小程序中显示
-
关于微信小程序中wx.request的问题
-
微信小程序如何实现K歌打分
-
美团微信小程序的支付模式是属于微信的哪种模式,看了文档,一直分不清
-
微信小程序富文本解析
-
微信小程序无法连接花生壳内网穿透
-
微信小程序在访问第三方api时,只有打开调试模式才能访问
-
微信小程序会员信息问题
-
微信小程序复选框重置问题
-
微信小程序云数据库API中wx-server-sdk怎么定义
-
微信小程序控制打印机
-
请问微信小程序如何生成Excel文件
-
微信小程序wx.openDocument 没有反应
-
学会了这些技术,你离BAT大厂不远了
每一个程序员都有一个梦想,梦想着能够进入阿里、腾讯、字节跳动、百度等一线互联网公司,由于身边的环境等原因,不知道 BAT 等一线互联网公司使用哪些技术?或者该如何去学习这些技术?或者我该去哪些获取这些技术资料?没关系,平头哥一站式服务,上面统统不是问题。平头哥整理了 BAT 等一线大厂的必备技能,并且帮你准备了对应的资料。对于整理出来的技术,如果你掌握的不牢固,那就赶快巩固,如果你还没有涉及,现在...
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收集私人信息,保...
程序员真是太太太太太有趣了!!!
网络上虽然已经有了很多关于程序员的话题,但大部分人对这个群体还是很陌生。我们在谈论程序员的时候,究竟该聊些什么呢?各位程序员大佬们,请让我听到你们的声音!不管你是前端开发...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
我的 Input框 不可能这么可爱
作者:陈大鱼头 github: KRISACHAN <input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识点。 本篇文章默认大家已经知道 <input /> 标签的基本用法,不会做过...
一声令下即可关灯,再也不用在寒冬深夜离开被窝~
全文共2951字,预计学习时长6分钟 你有没有在大冬天里的深夜里,为了关灯睡觉而不得不离开温暖被窝的经历? 本文将介绍如何为普通家庭照明开关构建自然语言接口,以便用户可以使用如“请打开所有灯”或者“打开孩子房间里的灯”等简单命令来控制灯光。 本文主要介绍自然语言接口(NLI)部分,不涵盖语音识别与实际灯光操作部分。你可以使用WebSpeech轻易实现语音转换,如有所需,也可使用Ardui...
知乎上 40 个有趣回复,很精辟很提神
点击蓝色“五分钟学算法”关注我哟加个“星标”,天天中午 12:15,一起学算法作者 |佚名来源 |网络整理,版权归原作者所有,侵删。1交朋友的标准是什么?- Ques...
从入门到精通,Java学习路线导航
引言 最近也有很多人来向我"请教",他们大都是一些刚入门的新手,还不了解这个行业,也不知道从何学起,开始的时候非常迷茫,实在是每天回复很多人也很麻烦,所以在这里统一作个回复吧。 Java学习路线 当然,这里我只是说Java学习路线,因为自己就是学Java的,对Java理当很熟悉,对于其它方面,我也不是很了解。 基础阶段 首先是基础阶段,在基础阶段,我们必须掌握Java基础,Mysql数据库,Ora...
反转!物联网火爆,程序员开发技能却有待加强?
近几年来,物联网发展迅速:据中商产业研究院《2016——2021年中国物联网产业市场研究报告》显示,预计到2020年,中国物联网的整体规模将达2.2万亿元,产业规模比互联...
推荐一位好朋友 | 机械转大数据,并拿到66个offer
锦锋是我的好朋友,他自学编程从车辆工程转到了Java开发然后转大数据,在校招中拿了大小厂66个offer,其中有头条、腾讯等。除了学习之外,他还是国家高级健身教练,同时也...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
接私活必备的 10 个开源项目!
点击蓝色“GitHubDaily”关注我加个“星标”,每天下午 18:35,带你逛 GitHub!作者 | SevDot来源 | http://1t.click/VE8W...
不要在网站上无限滚动!
人们在浏览网站的时候是喜欢用“无限滚动”,还是喜欢点击“阅读更多”或“查看更多”?无限滚动消除了分页的需要——分页是将数字内容分离到不同页面的过程。但这种方式真的好吗? 作者|Monish reddy 译者 |风车云马,责编 | 屠敏 出品 | CSDN(ID:CSDNnews) 以下为译文: 下面是我对无限滚动的看法,说明为什么它会导致不良后果。 对于某些用户来说,无限...
为什么你的努力可能是没用的?
看到这个标题,不少朋友可能直观的以为后面的内容不是励志的鸡汤就是广告。那就错了,这篇文章只是满满的干货。内容来自最近一段时间探索学习外加亲身感悟汇集而成。 前段时间和一位朋友聊天,聊到如何通过自由职业挣钱的事,朋友问:你准备怎样挣钱?我把自己看到的、听到的、经历的,外加想象的说了一遍。朋友问:这些你做到哪些了?顿时哑然。是啊,说了这么多,又做到了哪些呢?又将哪些做到了极致呢?如果没有做到极致,只努...
100 个网络基础知识普及,看完成半个网络高手
1)什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2)OSI 参考模型的层次是什么? 有 7 个 OSI 层:物理层,数据链路层,网络层,传输层,会话层,表示层和应用层。 3)什么是骨干网? 骨干网络是集中的基础设施,旨在将不同的路由和数据分发到各种网络。它还处理带宽管理和各种通道。 4)什么是 LAN? LAN 是局域网的缩...
技术一旦被用来作恶,究竟会有多可怕?
技术一直都在被用来作恶。 作为与经常与黑客、攻击者打交道的我们,熟知各种用技术作恶的手段。 这篇就作为简单的科普文来跟大家讲一讲。 作恶之一:DDoS攻击 用简单的一句话介绍DDoS攻击就是:黑客在短时间里发起大量的恶意流量,导致被攻击的业务带宽塞满使得正常用户无法访问。 再通俗一点,你可把DDoS攻击看作一群挤入商店的恶意顾客,他们不买东西,只瞎嚷嚷,目的是让真正的顾客堵在门外没办法购物。最终的...
学Linux到底学什么
来源:公众号【编程珠玑】 作者:守望先生 网站:https://www.yanbinghu.com/2019/09/25/14472.html 前言 ​我们常常听到很多人说要学学Linux或者被人告知说应该学学Linux,那么学Linux到底要学什么? 为什么要学Linux 在回答学什么之前,我们先看看为什么要学。首先我们需要认识到的是,很多服务器使用的是Linux系统,而作为服务器应...
C语言这么厉害,它自身又是用什么语言写的?
这是来自我的星球的一个提问:“C语言本身用什么语言写的?”换个角度来问,其实是:C语言在运行之前,得编译才行,那C语言的编译器从哪里来? 用什么语言来写的?如果是用C语...
win10电脑工具整理 - 常用工具!
如题,本文主要为博主对电脑上安装的一些软件,所做的整理,当做备份用吧。 一、分类 系统工具 办公软件 编程开发 数据库相关 图片视频工具 网络及下载工具 解压缩工具 影音娱乐工具 二、软件工具 1.系统工具 1.1. 磁盘管理 PartAssist:一款好用的磁盘分区管理工具。 1.2. 修复、引导 EasyBCD:一款常用的系统引导和修复工具。 1.3. 虚拟机管理工具 win10...
第二弹!python爬虫批量下载高清大图
文章目录前言下载免费高清大图下载带水印的精选图代码与总结 前言 在上一篇写文章没高质量配图?python爬虫绕过限制一键搜索下载图虫创意图片!中,我们在未登录的情况下实现了图虫创意无水印高清小图的批量下载。虽然小图能够在一些移动端可能展示的还行,但是放到pc端展示图片太小效果真的是很一般!建议阅读本文查看上一篇文章,在具体实现不做太多介绍,只讲个分析思路。 当然,本文可能技术要求不是特别高,但可以...
面试官,不要再问我三次握手和四次挥手
三次握手和四次挥手是各个公司常见的考点,也具有一定的水平区分度,也被一些面试官作为热身题。很多小伙伴说这个问题刚开始回答的挺好,但是后面越回答越冒冷汗,最后就歇菜了。 见过比较典型的面试场景是这样的: 面试官:请介绍下三次握手 求职者:第一次握手就是客户端给服务器端发送一个报文,第二次就是服务器收到报文之后,会应答一个报文给客户端,第三次握手就是客户端收到报文后再给服务器发送一个报文,三次握手就...
相关热词 c#二进制字符转字节 c# rc4 c#中md5加密 c# 新建mvc项目 c# 引用mysql c#动态加载非托管dll c# 两个表数据同步 c# 返回浮点json c# imap 链接状态 c# 漂亮字