微信小程序 上传图片

效果图 如上,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 ...
随机推荐
- Cookie和Session有什么区别
1. 由于HTTP协议是无状态的协议,所以服务端需要记录用户的状态时,就需要用某种机制来识别具体的用户,这个机制就是Session. 典型的场景比如购物车,当你点击下单按钮时,由于HTTP协议无状 ...
- BZOJ 2118 墨墨的等式 (同余最短路)
题目大意:已知B的范围,求a1x1+a2x2+...+anxn==B存在非负正整数解的B的数量,N<=12,ai<=1e5,B<=1e12 同余最短路裸题 思想大概是这样的,我们选定 ...
- 【Latex常见问题总结】
1. 非数学符号如max/min将下标放到正下方,这个问题折腾了很久, 下标不在正下方会带俩两个问题,一是有时候不够美观,二是会使得数学公式过长越界,需要换行. 解决方案:将符号转换为数学符号, \m ...
- 解决ORA-28002: 密码7天之后过期办法
https://www.douban.com/group/topic/46177516/ https://yq.aliyun.com/ziliao/42484 http://blog.csdn.net ...
- [Google Guava] 2.2-新集合类型
转自:并发编程网 原文链接:http://ifeve.com/google-guava-newcollectiontypes/ 链接博客其他文章中还有更多的guava其他功能的描述,有空可慢慢看. G ...
- UVA 11294 - Wedding(Two-Set)
UVA 11294 - Wedding 题目链接 题意:有n对夫妻,0号是公主.如今有一些通奸关系(男男,女女也是可能的)然后要求人分配在两側.夫妻不能坐同一側.而且公主对面一側不能有两个同奸的人,问 ...
- MyEclipse打包可运行的jar包
详细步骤: Export... -> java -> Runnable JAR file Launch configuration:选择main方法所在的文件/类 Export desti ...
- 主站sinox.org堵塞太厉害,大家用sinox.3322.org訪问
近期 www.sinox.org域名堵塞太厉害了.差点儿不能訪问,如今大家用sinox.3322.org訪问 sinox.org仅仅是显示正在建设 一直以来sinox.org仅仅是个摆设,并非主要域名 ...
- 基于FPGA的跨时钟域信号处理——专用握手信号
在逻辑设计领域,只涉及单个时钟域的设计并不多.尤其对于一些复杂的应用,FPGA往往需要和多个时钟域的信号进行通信.异步时钟域所涉及的两个时钟之间可能存在相位差,也可能没有任何频率关系,即通常所说的不同 ...
- 仿写从iOS8开始支持的UIAlertController:BGAAlertController-Android
工作以来公司UI设计师出的Android效果图都是iOS风格的UIAlertView和UIActionSheet,新项目还是用原来那一套,不想重复造轮子,所以仿写了从iOS8开始支持的UIAlertC ...