微信小程序 上传图片

效果图 如上,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 ...
随机推荐
- 装饰器阶段性练习(题目)[转载http://www.cnblogs.com/linhaifeng/p/7278389.html]
# 一:编写函数,(函数执行的时间是随机的)# 二:编写装饰器,为函数加上统计时间的功能# 三:编写装饰器,为函数加上认证的功能## 四:编写装饰器,为多个函数加上认证的功能(用户的账号密码来源于文件 ...
- SyntaxError Generator expression must be parenthesized
环境: Windows10 python3.7.0 Django1.11.15 异常 启动Django时抛出以下异常: Unhandled exception in thread started by ...
- BZOJ 2141 排队 (三维偏序CDQ+树状数组)
题目大意:略 洛谷传送门 和 [CQOI2015]动态逆序对 这道题一样的思路 一开始的序列视为$n$次插入操作 把每次交换操作看成四次操作,删除$x$,删除$y$,加入$x$,加入$y$ 把每次操作 ...
- Vue常用的GitHub项目
Vue常用的GitHub项目(Demo案例) 应用实例 https://github.com/pagekit/pa... pagekit-轻量级的CMS建站系统 https://github.com/ ...
- shell 的变量
一.自定义变量 1.字母或者下划线开头,由字母.数字.下划线组成,大小写敏感,在使用变量时,要在变量前加上前缀 $,一般变量由大写字母表示,并且英文开头,"=" 两边应没有空格.如 ...
- fensorflow 安装报错 DEPENDENCY ERROR
1.错误信息 DEPENDENCY ERROR The target you are trying to run requires an OpenSSL implementation. Your sy ...
- 洛谷——P1886 滑动窗口|| POJ——T2823 Sliding Window
https://www.luogu.org/problem/show?pid=1886#sub || http://poj.org/problem?id=2823 题目描述 现在有一堆数字共N个数字( ...
- 关于thinkpadU盘系统盘启动不了解决方法
http://www.laomaotao.org/softhelp/bios/382.html(原文章地址,比较全面) thinkpad笔记本uefi无法启动详细解决教程 最近有个别用户反映说thin ...
- HDU 4334 Contest 4
本来以为是一道水题,好吧,做了才知道,出题的人有多牛.二分搜索是不可能的了,因为会超内存... 看到别人的搜索两个集合的提示,我就自己一边去想了.终于想出来了: 可以这样做,先把每两个集合的和值枚举出 ...
- C++的标准模板库STL中实现的数据结构之链表std::list的分析与使用
摘要 本文主要借助对C++的标准模板库STL中实现的数据结构的学习和使用来加深对数据结构的理解,即联系数据结构的理论分析和详细的应用实现(STL),本文是系列总结的第二篇.主要针对线性表中的链表 ST ...