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

2个回答

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

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

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

接来下,我们上传微信小程序端的代码

//index.js
const app = getApp()

Page({
  data: {
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: ''
  },

  onLoad: function() {
    var that = this
    // 调用云函数
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数] [login] user openid: ', res.result.openid)
        app.globalData.openid = res.result.openid
        that.setData({
          openid_info: res.result.openid
        })
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)

      }
    })
  },

  // 上传图片
  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 open_info = that.data.openid_info  
            console.log(that.data.bigImg)
            console.log(that.data.openid_info)
            wx.getImageInfo({
              src: that.data.bigImg,
              success: function (res) {
                console.log('happening:', res.path) //这个是转换的临时链接res.path
                that.setData({
                  tempath:res.path
                })
                console.log('tempath',that.data.tempath)
                let tempinfo = that.data.tempath
                db.collection('newdata').add({    //这个就把云数据的图片存储路径上传到数据链表中了
                  data: {
                    imginfo: fileID,
                    respath: tempinfo
                  },
                  success(res) {
                    console.log('get success')
                    console.log(res)
                    console.log(tempinfo)
                  }
                })
              },
              fail: function (res) {
                console.log('failure')
              }
            })

            const db = wx.cloud.database();

          },
          fail: e => {
            console.error('[上传图片]失败:', e)
          },
          complete: () => {
            wx.hideLoading()
          }
        });
      }
    })
  }
})

<!--index.wxml-->
<view class="container">

  <!-- 上传图片 -->
  <view class="uploader">
    <view class="uploader-text" bindtap="getdata">
      <text>上传图片</text>
    </view>
    <view class="uploader-container" wx:if="{{bigImg}}">
      <image class="uploader-image" src="{{bigImg}}" mode="aspectFit" bindtap="previewImg"></image>
    </view>
  </view>

</view>

/**index.wxss**/

page {
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.userinfo, .uploader, .tunnel {
  margin-top: 40rpx;
  height: 140rpx;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all 300ms ease;
}


.uploader, .tunnel {
  height: auto;
  padding: 0 0 0 40rpx;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

.uploader-text, .tunnel-text {
  width: 100%;
  line-height: 52px;
  font-size: 34rpx;
  color: #007aff;
}

.uploader-container {
  width: 100%;
  height: 400rpx;
  padding: 20rpx 20rpx 20rpx 0;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.uploader-image {
  width: 100%;
  height: 360rpx;
}

完整的代码在:https://github.com/ksyueying/pic_updata.git

qq_41772343
qq_41772343 回复小墨工作室: 上传的是多张图片,把他们的存储地址存入云数据库,应该怎么写呢
18 天之前 回复
kkshuaicc
小墨工作室 回复阿阿阿杨: https://github.com/ksyueying/pic_updata.git整的代码,有什么问题可以问我
23 天之前 回复
weixin_42319561
阿阿阿杨 大佬好,请问能不能给个源码?
23 天之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
原生微信小程序的图片上边怎样添加一个按钮

原生微信小程序的图片上边怎样添加一个按钮 ![图片说明](https://img-ask.csdn.net/upload/201908/07/1565147863_485588.jpg) 这是一个图片,钻展广告是一个按钮,放在图片上边的。

微信小程序界面残缺问题

微信小程序开发工具上是完整的界面,能跳转 到了手机上就是残缺的,点击也不会跳转,请遇到过的小伙伴说说是怎么回事,有解决办法没,谢谢

微信小程序 WX for 数据绑定

![图片说明](https://img-ask.csdn.net/upload/201904/13/1555146952_618257.png) ![图片说明](https://img-ask.csdn.net/upload/201904/13/1555147197_958576.png)![图片说明](https://img-ask.csdn.net/upload/201904/13/1555147217_16973.png) 刚接触微信小程序,这是wxml,js 的代码,我想完成数据绑定,但是为什么都是养胃?

微信小程序怎么拿云存储中的图片在前端做轮播图的图片

微信小程序怎么拿云存储中的图片在前端做轮播图的图片? 求代码!!!谢谢

关于微信小程序请求服务器和服务器返回数据的疑问

当微信小程序的两个不同用户在同一功能实现上同一时间向服务器请求数据,服务器在返回数据时会不会发错用户? 我想做的微信小程序后台是用Java编写的,用Tomcat做服务,用servlet来响应小程序请求

微信小程序使用input提交表单时自动加后缀

代码: ``` <input class='inp' bindinput='inputName' value="{{open_card_info.card_name || ''}}" placeholder='请填写你的姓名'></input> ``` 后缀:{{info.name}}(这是在小程序前端显示的门店名称,动态的) 举例说明: 姓名:马豪 {{info.name}}=门店一 输入姓名 马豪 提交后,后台取到的数据是:马豪-门店一

微信小程序怎么获取图片

在微信小程序上点击一次获取一张图片,在点击一次在获取一张,上一张不覆盖,

微信小程序view设置图片背景

微信小程序中怎么给一个view设置背景有图片,并且可以填写文字,麻烦给出代码,不是很会前段。效果图 ![图片说明](https://img-ask.csdn.net/upload/201710/27/1509096298_483784.png)

微信小程序本页面的文本信息如何在另一个页面显示

微信小程序本页面的文本如何传到另一个页面 ![图片说明](https://img-ask.csdn.net/upload/201905/28/1559024683_660536.png)![图片说明](https://img-ask.csdn.net/upload/201905/28/1559024691_34852.png)

微信小程序在付款后,会出现一个满屏白色的界面,直接关闭不点完成后续的业务逻辑怎么实现

微信小程序在付款后,会出现一个满屏白色的界面,直接关闭,不点完成,然后微信的回调不会执行,下图为支付中![图片说明](https://img-ask.csdn.net/upload/201906/18/1560847987_273643.png) 当输入密码后,会出现下边页面![图片说明](https://img-ask.csdn.net/upload/201906/18/1560848125_590989.png) 如果不点完成,那么微信支付接口的回调成功函数就不会执行,为了避免用户不点完成而直接退出,导致后续的业务逻辑不能够执行,请问大佬们这个怎么解决?

微信小程序如何在按钮上添加图片

微信小程序的按钮上想添加图片怎么做, 有没有相关的代码啊在js和wxml和wxss中的代码, 如果想弄动画怎么做啊

把串口的数据显示在微信小程序需要哪些知识?

想做个课设,可以把单片机获取的数据传到微信小程序端显示,但是不知道需要用到哪些知识?

Python做的爬虫怎么放到微信小程序上面去?

我想做一个微信小程序,然后后端是一个Python写的网站爬虫,用来爬一些牌子的商品上新数据,小程序就用来获取和显示爬到的数据,但是不想一直带着电脑,所以想把爬虫做成一个微信小程序放到手机上。 自己目前还是大二,编程能力渣渣,所以想借这个机会提高一下自己的能力,还请大佬指点怎么把Python做的爬虫变成微信小程序 我有了解到java做后端的,但是我java才学了一丢丢,和没学差不多,所以如果和java相关的也是可以的,我看看能不能努力去学学看,当然最好是Python

微信小程序--页面删除数据后实现自动刷新页面

各位大牛,请问微信小程序页面我删除了数据,怎样自动刷新该页面

求微信小程序 图片轮播接口 或返回的json数据

求微信小程序 图片轮播接口 或返回的json数据 4张图片轮播 调用API接口!

微信小程序将view/画布canvas生成图片

## 背景 最近在做一个图片编辑的小程序,就是在一张图片上,放一些小装饰(图片),通过监听手势和使用CSS的transform实现移动和缩放。 ## 问题 但是遇到一个问题,就是如何将图片加上面的小装饰作为一个整体的图片保存起来呢? 在网上搜索好久,看到有的思路是将view写入画布,但是并没有解决方法。如果将图片直接写入画布,那么有如何做到缩放和移动呢,求教各位大佬

微信小程序请求数据request

微信小程序请求开发平台的数据必须是https请求,但是我的本地是http,本地项目要换成https该怎么做啊

python写的爬虫怎么放在微信小程序的环境下运行(或者说怎么在微信小程序写爬虫)?

本人大四,现在正在准备毕业设计,不想做一般的web项目(所有人都在做没有什么新意),思来想去最后决定用python写个爬虫(这个是毕设的核心功能),然后想联系当下的较流行的微信小程序,把爬虫放到微信小程序上进行运行(曾在网上看到一位大神在小程序上爬豆瓣的妹子图,感觉和我想要的差不多)。大致的流程基本是这样的。所以想大佬们指导一下小弟,怎么在小程序上实现爬虫?

微信小程序预览数据出错

微信小程序使用排序时,真机调试数据正常,但是使用预览功能时数据会出错,有没有大神知道啊?有点急

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

Java校招入职华为,半年后我跑路了

何来 我,一个双非本科弟弟,有幸在 19 届的秋招中得到前东家华为(以下简称 hw)的赏识,当时秋招签订就业协议,说是入了某 java bg,之后一系列组织架构调整原因等等让人无法理解的神操作,最终毕业前夕,被通知调往其他 bg 做嵌入式开发(纯 C 语言)。 由于已至于校招末尾,之前拿到的其他 offer 又无法再收回,一时感到无力回天,只得默默接受。 毕业后,直接入职开始了嵌入式苦旅,由于从未...

Java基础知识面试题(2020最新版)

文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性?原理是什么Java语言有哪些特点什么是字节码?采用字节码的最大好处是什么什么是Java程序的主类?应用程序和小程序的主类有何不同?Java应用程序与小程序之间有那些差别?Java和C++的区别Oracle JDK 和 OpenJDK 的对比基础语法数据类型Java有哪些数据类型switc...

@程序员:GitHub这个项目快薅羊毛

今天下午在朋友圈看到很多人都在发github的羊毛,一时没明白是怎么回事。 后来上百度搜索了一下,原来真有这回事,毕竟资源主义的羊毛不少啊,1000刀刷爆了朋友圈!不知道你们的朋友圈有没有看到类似的消息。 这到底是啥情况? 微软开发者平台GitHub 的一个区块链项目 Handshake ,搞了一个招募新会员的活动,面向GitHub 上前 25万名开发者派送 4,246.99 HNS币,大约价...

再不跳槽,应届毕业生拿的都比我多了!

跳槽几乎是每个人职业生涯的一部分,很多HR说“三年两跳”已经是一个跳槽频繁与否的阈值了,可为什么市面上有很多程序员不到一年就跳槽呢?他们不担心影响履历吗? PayScale之前发布的**《员工最短任期公司排行榜》中,两家码农大厂Amazon和Google**,以1年和1.1年的员工任期中位数分列第二、第四名。 PayScale:员工最短任期公司排行榜 意外的是,任期中位数极小的这两家公司,薪资...

我以为我学懂了数据结构,直到看了这个导图才发现,我错了

数据结构与算法思维导图

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

华为初面+综合面试(Java技术面)附上面试题

华为面试整体流程大致分为笔试,性格测试,面试,综合面试,回学校等结果。笔试来说,华为的难度较中等,选择题难度和网易腾讯差不多。最后的代码题,相比下来就简单很多,一共3道题目,前2题很容易就AC,题目已经记不太清楚,不过难度确实不大。最后一题最后提交的代码过了75%的样例,一直没有发现剩下的25%可能存在什么坑。 笔试部分太久远,我就不怎么回忆了。直接将面试。 面试 如果说腾讯的面试是挥金如土...

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

讲一个程序员如何副业月赚三万的真实故事

loonggg读完需要3分钟速读仅需 1 分钟大家好,我是你们的校长。我之前讲过,这年头,只要肯动脑,肯行动,程序员凭借自己的技术,赚钱的方式还是有很多种的。仅仅靠在公司出卖自己的劳动时...

win10暴力查看wifi密码

刚才邻居打了个电话说:喂小灰,你家wifi的密码是多少,我怎么连不上了。 我。。。 我也忘了哎,就找到了一个好办法,分享给大家: 第一种情况:已经连接上的wifi,怎么知道密码? 打开:控制面板\网络和 Internet\网络连接 然后右击wifi连接的无线网卡,选择状态 然后像下图一样: 第二种情况:前提是我不知道啊,但是我以前知道密码。 此时可以利用dos命令了 1、利用netsh wlan...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

程序员写出这样的代码,能不挨骂吗?

当你换槽填坑时,面对一个新的环境。能够快速熟练,上手实现业务需求是关键。但是,哪些因素会影响你快速上手呢?是原有代码写的不够好?还是注释写的不够好?昨夜...

!大部分程序员只会写3年代码

如果世界上都是这种不思进取的软件公司,那别说大部分程序员只会写 3 年代码,恐怕就没有程序员这种职业。

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

HTTP与HTTPS的区别

面试官问HTTP与HTTPS的区别,我这样回答让他竖起大拇指!

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

终于懂了TCP和UDP协议区别

终于懂了TCP和UDP协议区别

Python爬虫,高清美图我全都要(彼岸桌面壁纸)

爬取彼岸桌面网站较为简单,用到了requests、lxml、Beautiful Soup4

立即提问
相关内容推荐