1、上传图片到服务器,有两个步骤:

1.1  拿到可上传的图片 wx.chooseImage

1.2  将图片上传到服务器  wx.uploadFile

2、代码实现

<button bindtap="upload">点击上传</button>

<image src="{{imgPath}}" mode=""/>

 upload(){var _this=thiswx.chooseImage({拿几张图片 count图片上传类型  sizeType图片来源   sourceTypesuccess(res){//获取成功  wx.uploadFile({临时图片路径 filePath服务器地址   urlnametimeoutsuccess(res){let imgPath=baseUrl+JSON.parse(res2.data).data_this.setData({imgPath})}})}     })}
// 上传图片到服务器upload() {var _this=thiswx.chooseImage({count: 1,   //可上传的图片数量sizeType: ['original', 'compressed'],//上传图片类型:原图、压缩图sourceType: ['album', 'camera'], //图片来源:相册、照相机success(res) {// 成功,将图片上传到服务器console.log(res);// 拿取临时路径文件let filePath = res.tempFilePaths[0]/*  控制台的 tempFilePaths: ["http://tmp/DTalF29Fe4wkc6221b571e512fe6b7a68b2926e81b51.jpg"]即表示图片的临时路径*/wx.uploadFile({/* // 拿到临时图片路径后上传到服务器,服务器将返回一个公网地址,届时在任意角落都将能访问到这张图片 */filePath: filePath, //临时文件路径url: baseUrl + "/api/test/user/upload",  //填写公司的服务器地址name: 'file',   /* //非常重要!!!!是后台访问二进制数据的关键 该 file 是对应接口,所需要传递的参数 */timeout:5000,success(res2){console.log(res2);// 需解析信息,拿到图片路径,因为本项目的 域名以 .com 结尾,所以需要“ / ”进行必要分隔let imgPath=baseUrl+"/"+JSON.parse(res2.data).data //将二进制转换成字符串类型_this.setData({imgPath})}})}})},

13、微信小程序:上传图片到服务器相关推荐

  1. 微信小程序上传图片至服务器Springboot接收格式的问题

    微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...

  2. 微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?

    微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧,但是把图片上传到服务器就不一定了,下面一起随小编看看微信小程序怎么上传图片到服务器吧. 微信小程序怎么上传图片到服务器? 首先, ...

  3. 微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...

    很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...

  4. 微信小程序上传图片到服务器不显示,微信小程序上传图片到服务器wx.uploadFile...

    项目中肯路能需还定有开都视这讲房哦搞有名需移洁页定会遇到上传文件到服务器端,小程序提供了很有用的ap朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上i wxml代码遇新是直朋能到: 上传 ...

  5. uniapp 微信小程序 上传图片到服务器

    图片选择,图片上传,点击查看,点击删除. uniapp自带的chooseImage和uploadFile就可以解决选择和上传.预览/查看用previewImage,删除就直接移除list里面的项就好了 ...

  6. 微信小程序上传图片组件,多选+单选+预览+删除

    微信小程序上传图片+预览+删除 组件代码 HTML <view class="uploadImg-wrap"><view class="upload-f ...

  7. 微信小程序上传图片到七牛云

    七牛云上传图片 第一次用七牛云,目的是存储一些图片 1.首先是七牛云的注册,很简单. 2.注册完创建新的空间 3.这时候会自动分配给你一个域名,但是有效期是30天. 4.若要长久使用,最好用自己的域名 ...

  8. 微信小程序 解决请求服务器手机预览请求不到数据的方法

    微信小程序 解决请求服务器手机预览请求不到数据的方法 微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...

  9. 微信小程序上传图片 预览 删除

    微信小程序上传图片 预览 删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...

  10. 微信小程序--上传图片加水印

    微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...

最新文章

  1. mybatis中foreach
  2. MAX Script 脚本语言
  3. P1198 [JSOI2008]最大数
  4. 给网页上加广告的一点感受
  5. 去除SAP中的一些特殊字符
  6. Eclipse中实现SpringBoot与Mybatis整合(图文教程带源码)
  7. OpenCASCADE:绘制测试线束之命令语言
  8. css 商城 两列_CSS 居中?来一探究竟
  9. Lang.String
  10. Bootstrap中的条纹进度条使用案例
  11. 远程服务器登入信息,远程登录服务器查看信息
  12. 2021 ZUST,XCPC选拔赛
  13. Java 数组类型转字符串类型
  14. windows server 2003产生的 Minidmp蓝屏文件分析求助
  15. Mybatis的xml映射文件,sql的模糊查询的实现(两种方式)占位符拼接,concat关键字
  16. 两轮电动车不需要高端
  17. CSDN产品周报第31期|PC端开放账号注销功能
  18. ②五元物联网芯片点亮led 庆科EMW3060 , 运行alios- blink程序
  19. 嵌入式系统基础:点阵汉字的字模读取与显示
  20. 用秦九昭公式计算多项式

热门文章

  1. 快速学习-Saturn Console部署
  2. 门店管理|火锅店数字化系统转型
  3. webrtc H265 网页播放器迈向实用第一步
  4. Android数据存储---数据备份(Data Backup)(三)
  5. 三级等保备案去哪查_民贷天下通过国家信息安全等级保护三级备案
  6. 微信小程序实现考场座位号随机
  7. Python模拟超级大乐透随机选号
  8. webstorm js中文乱码
  9. JunOS VRRP configuration
  10. C++(数据结构复习篇)(数组【压缩】|广义表)的概念和相关算法)