效果图  如上,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
 

微信小程序 上传图片的更多相关文章

  1. 微信小程序上传图片及本地测试

    前端(.wxml) <view id="view1"> <view id="btns"> <image id="ima1 ...

  2. 微信小程序 上传图片并等比列压缩到指定大小

    微信小程序官方API中  wx.chooseImage() 是可以进行图片压缩的,可惜的是不能压缩到指定大小. 实际开发中需求可能是压缩到指定大小: 原生js可以使用canvas来压缩,但由于微信小程 ...

  3. 微信小程序上传图片(附后端代码)

    几乎每个程序都需要用到图片. 在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片 首先选择图片 通过wx.chooseImage(OB ...

  4. (十)微信小程序---上传图片chooseImage

    官方文档 示例一 wxml <view bindtap="uploadImage">请上传图片</view> <image wx:for=" ...

  5. .NET开发微信小程序-上传图片到服务器

    1.上传图片分为几种: a:上传图片到本地(永久保存) b:上传图片到本地(临时保存) c:上传图片到服务器 a和b在小程序的api文档里面有.直接说C:上传图片到服务器 前端代码: /* 上传图片到 ...

  6. 微信小程序上传图片,视频及预览

    wxml <!-- 图片预览 --> <view class='preview-warp' wx:if="{{urls}}"> <image src= ...

  7. 微信小程序上传图片(前端+PHP后端)

    一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择 ...

  8. 微信小程序 - 上传图片(组件)

    更新日期: 2019/3/14:首次发布,更新了2018/12/30的UI以及反馈信息获取方式,具体请下载:demo. 2019/3/20:感谢544429676@qq.com指出的现存bug,已修复 ...

  9. 微信小程序上传图片更新图像

    解决思路: 1. 调用wx.chooseImage 选择图片 2.wx.uploadFile 上传图片 3.调用后台接口进行修改操作 修改原来的头像 wx.chooseImage({ success: ...

  10. 微信小程序上传图片

    话不多说,直接上码. <view class="section"> <!--放一张图片或按钮 点击时去选择图片--> <image class='ph ...

随机推荐

  1. 《Exception》第八次团队作业:Alpha冲刺(第二天)

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.掌握软件测试基础技术.2.学习迭代式增量软 ...

  2. ubuntu/wireshark --Lua: Error during loading: [string "/usr/share/wireshark/init.lua"]:45问题解决

    错误如下: 解决方案:修改init.lua 直接运行wireshark的话会报错: Lua: Error during loading:[string "/usr/share/wiresha ...

  3. 洛谷 P1894 [USACO4.2]完美的牛栏The Perfect Stall

    P1894 [USACO4.2]完美的牛栏The Perfect Stall 题目描述 农夫约翰上个星期刚刚建好了他的新牛棚,他使用了最新的挤奶技术.不幸的是,由于工程问题,每个牛栏都不一样.第一个星 ...

  4. ZOJ 3640

    很简单的概率题了 设dp[x]为能力值 为x时出去的期望 天数 #include <iostream> #include <cstdio> #include <cmath ...

  5. 【IPC进程间通讯之三】内存映射文件Mapping File

    IPC进程间通信+共享内存Mapping                IPC(Inter-Process Communication.进程间通信).         文件映射(Mapping)是一种 ...

  6. jQuery——map()函数以及它的java实现

    map()函数小简单介绍 map()函数一直都是我觉得比較有用的函数之中的一个,为什么这么说呢? 先来考虑一下.你是否碰到过下面场景:须要遍历一组对象取出每一个对象的某个属性(比方id)而且用分隔符隔 ...

  7. (OpenGL ES 2.0 Shading Language) attribute 、uniform 和 varying

    一:attribute .uniform 和 varying 都是glsl的变量的内存指示器(storage qualifiers),指明变量的内存特性 二:attribute attribute 是 ...

  8. ThinkPHP5.0框架开发--第11章 TP5.0 杂项

    ThinkPHP5.0框架开发--第11章 TP5.0 杂项 第11章 TP5.0 杂项 =============================================== 今日学习 1. ...

  9. sicily 1342 开心的金明 (动规)

    刷一下简单的背包问题 以下为代码: //1342. 开心的金明 #include <iostream> using namespace std; #define MAX(a,b) a> ...

  10. HTTP的请求及响应

    前言 本文主要包括以下内容: HTTP是什么? HTTP 请求包括哪些部分? HTTP 响应包括哪些部分? 如何用Chrome开发者工具查看 HTTP 请求及请求的内容? 如何使用 curl 命令? ...