微信小程序 上传图片

效果图 如上,js 如下,在页面循环图片就可以
/**
* 选择图片
*/
uploadImgAdd: function(e) {
var imgs = this.data.imgs;
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
for (let j in res.tempFilePaths){
if (res.tempFilePaths[j].substring(res.tempFilePaths[j].length - 3) == 'gif'){
wx.showToast({
title: '暂不能上传动图哦,换张图片试试吧~',
icon: 'none',
duration: 2000,
mask: true,
})
res.tempFilePaths.splice(j, 1)
}
}
let tempFilePaths = this.data.tempFilePaths.concat(res.tempFilePaths);
this.setData({
tempFilePaths: tempFilePaths
})
let uploadimagsSrc = []
for (var i = 0; i < tempFilePaths.length; i++) { //转换为七牛地址
if (imgs.length >= 9) {
return false;
} else {
wx.uploadFile({
url: app.data.urls + 'images/Picture',
filePath: tempFilePaths[i],
header: {
'content-type': 'multipart/form-data'
},
name: 'file',
success: res => {
let data = res.data;
console.log(res)
uploadimagsSrc = [...uploadimagsSrc, data];
this.setData({
uploadimagsSrc: uploadimagsSrc
})
},
fail: (res) => {
console.log(res)
if (res.errMsg == "uploadFile:fail Broken pipe"){ }
}
})
}
}
},fail:(res)=>{
console.log(res)
}
})
}, /**
* 删除图片
*/
uploadImgClose: function(e) {
var imgs = this.data.tempFilePaths;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
this.setData({
tempFilePaths: imgs,
uploadimagsSrc: imgs
});
},
/pulishComment/pulishComment
微信小程序 上传图片的更多相关文章
- 微信小程序上传图片及本地测试
前端(.wxml) <view id="view1"> <view id="btns"> <image id="ima1 ...
- 微信小程序 上传图片并等比列压缩到指定大小
微信小程序官方API中 wx.chooseImage() 是可以进行图片压缩的,可惜的是不能压缩到指定大小. 实际开发中需求可能是压缩到指定大小: 原生js可以使用canvas来压缩,但由于微信小程 ...
- 微信小程序上传图片(附后端代码)
几乎每个程序都需要用到图片. 在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片 首先选择图片 通过wx.chooseImage(OB ...
- (十)微信小程序---上传图片chooseImage
官方文档 示例一 wxml <view bindtap="uploadImage">请上传图片</view> <image wx:for=" ...
- .NET开发微信小程序-上传图片到服务器
1.上传图片分为几种: a:上传图片到本地(永久保存) b:上传图片到本地(临时保存) c:上传图片到服务器 a和b在小程序的api文档里面有.直接说C:上传图片到服务器 前端代码: /* 上传图片到 ...
- 微信小程序上传图片,视频及预览
wxml <!-- 图片预览 --> <view class='preview-warp' wx:if="{{urls}}"> <image src= ...
- 微信小程序上传图片(前端+PHP后端)
一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择 ...
- 微信小程序 - 上传图片(组件)
更新日期: 2019/3/14:首次发布,更新了2018/12/30的UI以及反馈信息获取方式,具体请下载:demo. 2019/3/20:感谢544429676@qq.com指出的现存bug,已修复 ...
- 微信小程序上传图片更新图像
解决思路: 1. 调用wx.chooseImage 选择图片 2.wx.uploadFile 上传图片 3.调用后台接口进行修改操作 修改原来的头像 wx.chooseImage({ success: ...
- 微信小程序上传图片
话不多说,直接上码. <view class="section"> <!--放一张图片或按钮 点击时去选择图片--> <image class='ph ...
随机推荐
- 【RHEL7/CentOS7防火墙之firewall-cmd命令详解】
目录 Firewalld zone firewall-cmd 开始配置防火墙策略 总结 Redhat Enterprise Linux7已默认使用firewalld防火墙,其管理工具是firewall ...
- 2019-03-28 SQL Server Pivot
--现在我们是用PIVOT函数将列[WEEK]的行值转换为列,并使用聚合函数Count(TotalPrice)来统计每一个Week列在转换前有多少行数据,语句如下所示 select * from Sh ...
- mybatis-plus注解版实现多表联查(sql)
mybatis注解版实现多表联查 需求: 用户有角色,角色有权限,需要一次取用户信息包含角色信息及其对应权限 实体类: package cn.zytao.taosir.common.model.use ...
- C语言实现将一个整形数转换为两个字节16进制
有时候要用到这个转换,这里记录一下,例如把 int a = 164 转换储存在数组里为 uint8_t b[0]=0x00 , b[1]=0xA4 . 很简单,转换如下: b[0] = a > ...
- C# 发布APP修改APP图标以及名称
很多时候,我们用C#编程后,都要对我们的上位机生成的图标跟名字进行修改,下面我就 VS2015 怎么修改做个说明. 1.打开项目属性 2.打开应用程序的属性界面,对相应的地方进行修改就可以了 3.修改 ...
- GitHub上传项目,使用desktop(客户端)教程
GitHub上传项目,使用desktop(客户端)教程 搜索“GitHub上传项目”,能得到很多相关的文章教程,里面讲的都特别麻烦,要弄什么ssh之类的,可算是吓坏了我,使我非常的怀疑为什么GitH ...
- tddl
淘宝根据自己的业务特点开发了TDDL(Taobao Distributed Data Layer 外号:头都大了 ?_Ob)框架,主要解决了分库分表对应用的透明化以及异构数据库之间的数据复制,它是一个 ...
- 国家人工智能(AI)的美好前景
在今年两会期间.李彦宏(Robin Lee,1968-)关于人工智能(AI)"国家优先"的提案,即所谓的"中国大脑"计划.依据何在?为什么? 近几年,世界互联网 ...
- 測试jbpm6.2使用的基础类
方便了解jbpm6.2功能我们能够建立一个測试项目,在当中构建一个測试基础类,详细过程例如以下所看到的. 在集成了插件org.drools.updatesite-6.2.0.Final.zip的ecl ...
- Android 输入管理服务-输入事件向详细应用的分发
输入管理服务接收到输入事件,对输入事件进行处理之后会把输入事件分发到详细的应用中(如WMS.壁纸服务等)去处理的,这里涉及到了JNI从C++层向JAVA层的调用. 详细流程例如以下图所看到的: