微信小程序 上传图的功能
首先选择图片,然后循环,再就是在点击发布的时候循环图片地址赋值,包括删除命令

js代码:
//选择图片
uploadImgAdd: function(e) {
var imgs = this.data.imgs;
console.log(imgs)
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
console.log(res)
let tempFilePaths = res.tempFilePaths;
let imgs = this.data.imgs;
console.log('imgs')
console.log(imgs)
//上传的图片
for (var i = 0; i < tempFilePaths.length; i++) {
if (imgs.length >= 9) {
return false;
} else {
imgs.push(tempFilePaths[i])
}
}
//上传的图片放到页面上
this.setData({
imgs: imgs
})
}
})
}, /**
* 获取上传图片地址
*/
//单击发布上传图片和内容
bindFormSubmit: function(e) {
var imgArr = this.data.imgs;
this.addPic(e, imgArr)
},
addPic: function(e, imgArr) {
console.log("imgArr")
console.log(imgArr) let uploadimagsSrc = this.data.uploadimagsSrc;
console.log("uploadimagsSrc")
console.log(uploadimagsSrc)
for (let i in imgArr) {
wx.uploadFile({
url: app.data.urls + 'images/Picture',
filePath: imgArr[i],
header: {
'content-type': 'multipart/form-data'
},
name: 'file',
success: res => {
console.log(res)
let data = res.data;
console.log(data)
console.log([...uploadimagsSrc, data])
uploadimagsSrc = [...uploadimagsSrc, data];
console.log(uploadimagsSrc)
this.setData({
uploadimagsSrc: uploadimagsSrc
})
},
})
} let timer = setInterval(() => {
//间歇调用
if (uploadimagsSrc.length == imgArr.length) {
console.log(uploadimagsSrc)
console.log(imgArr)
debugger
this.sendMessageInfo(e, uploadimagsSrc);
clearInterval(timer); //可取消由 setInterval() 函数设定的定时执行操作
}
}, 500)
},
sendMessageInfo: function(e, imagsSrc) {
var formData = e.detail.value.message
if (formData.length == 0) {
wx.showToast({
title: '意见反馈内容不能为空,说几句话吧~',
icon: 'none',
duration: 1500
})
return false;
}
var replaceLeftRig = formData.replace(/(^\s*)|(\s*$)/g, "").length
if (replaceLeftRig < 15) {
wx.showToast({
title: '意见反馈内容不能少于15个字',
icon: 'none',
duration: 1500
})
return false;
}
imagsSrc = imagsSrc.join(';')
wx.request({
url: app.data.urls + 'feedback/insertCustomerFeedback',
data: {
"customerId": app.data.customerId,
"feedbackMessages": formData,
"imagesAddress": imagsSrc,
},
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res)
/**
*
* 异常判断
*
*
*/
if (res.data.status == 200) {
wx.showModal({
content: '谢谢您提交的反馈,后台的小哥哥会第一时间收到哦~',
showCancel: false,
confirmText: "知道了",
success: function(res) {
if (res.confirm) {
wx.navigateBack({
delta: 1
})
}
}
});
} else {
wx.showModal({
content: '系统繁忙',
showCancel: false,
confirmText: "知道了",
success: res => {
console.log(res)
}
});
} }
})
}, //删除图片
uploadImgClose: function(e) {
var imgs = this.data.imgs;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
this.setData({
imgs: imgs
});
// console.log(imgs)
}, feedBack/feedBack
微信小程序 上传图的功能的更多相关文章
- 微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
- 微信小程序上传多张图片,及php后台处理
微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{wi ...
- 微信小程序上传与下载文件
需要准备的工作: ①.建立微信小程序工程,编写以下代码. ②.通过IDE建立springboot+web工程,编写接收文件以及提供下载文件的方式,并将上传的文件相关信息记录在mysql数据库中.具体请 ...
- 微信小程序上传后发布或者体验版测试无数据解决办法
在做微信小程序开发的过程中,发现小程序在本地调用接口的数据都显示,但是上传之后,发现手机体验没有数据.以下为解决办法: 1.先清除缓存试试. 2.打开微信小程序工具右上角的详情——项目设置,将“不校验 ...
- Taro 微信小程序 上传文件到minio
小程序前端上传文件不建议直接引用minio的js npm包,一来是这个包本身较大,会影响小程序的体积,二来是ak sk需要放到前端存储,不够安全,因此建议通过请求后端拿到签名数据后上传. 由于小程序的 ...
- 微信小程序-上传照片-多张显示
图片就是一个简单的效果 实现 先看wxml和wxss代码 <view class='in-demand'> <view class='dema-title'> <text ...
- 微信小程序上传文件遇到的坑
在开发小程序时,使用的花生壳做的内网映射,域名使用花生壳卖的https域名 在做小程序文件上传时,调用接口,老是报错. Caused by: org.apache.commons.fileupload ...
- 微信小程序-上传下载
wx.uploadFile(OBJECT) 上传 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage(图片)/wx.chooseVideo(视频) 等接口获取到一个本地资源的临时文 ...
- 微信小程序上传一或多张图片
一.要点 1.选取图片 wx.chooseImage({ sizeType: [], // original 原图,compressed 压缩图,默认二者都有 sourceType: [], // a ...
随机推荐
- 粘包解决高端_Client
from socket import * #导入套接字模块的所有命令import struct #导入struck模块,用于封装数据流长度# from functools import partial ...
- node——post提交新闻内容
获取用户post提交的数据分多次提交,因为post提交数据的时候,数据量可能比较大,会要影响服务器中获取用户所以.提交的所有数据,就必须监听request事件.那么,什么时候才表示浏览器把所有数据提交 ...
- webpack——entry,output,plugins,loader,chunk知识
entry:打包入口 代码的入口,找到依赖模块 打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖 可以是一个或者多个入口 例如: 1.module.exports={ entry: ...
- Sona && Little Elephant and Array && Little Elephant and Array && D-query && Powerful array && Fast Queries (莫队)
vjudge上莫队专题 真的是要吐槽自己(自己的莫队手残写了2个bug) s=sqrt(n) 是元素的个数而不是询问的个数(之所以是sqrt(n)使得左端点每个块左端点的范围嘴都是sqrt(n)) 在 ...
- JS中的异步
Hello,日常更新的我“浪”回来了!!! JS中有三座高山:异步和单线程.作用域和闭包.原型原型链 今天“浪”的主题是JS中的异步和单线程的问题. 主要从这三个方面入手 一.什么是异步(与同步作比较 ...
- Rsync和Sersync(企业实时同步方案)
注:本文章依据参考文章中的信息资料结合自己的实践操作而成 一.实验环境介绍 系统版本:Cent OS 7.4 X64 内核版本:3.10.0-693.5.2.el7.x86_64 系统采用最小化安装, ...
- MySQL的读写分离的几种选择
MySQL的读写分离的几种选择 MySQL主从复制(Master-Slave)与读写分离(MySQL-Proxy)实践 原址如下: http://heylinux.com/archives/1004. ...
- 紫书 例题8-2 UVa 11605(构造法)
这道题方法非常的巧妙, 两层的n*n, 第一层第I行全是第I个国家, 第二层的第j列全是第j个国家.这样能符合题目的条件.比如说第1个国家, 在第一层的第一行全是A, 然后在第二层的第一行就有ABCD ...
- spring boot和maven的约定大于配置体现在哪些方面
spring boot和maven的约定大于配置体现在哪些方面? 两者都遵从了约定大于配置的路线 约定优于配置体现点: 1.maven的目录文件结构 1)默认有resources文件夹,存放资源配置文 ...
- 【Allwinner ClassA20类库分析】 2.free pascal语法及结构简析
上一节介绍了Lazarus一般的开发操作流程,对于不熟悉pascal语言的朋友可能看的还是不大明确.不知道pascal代码里都应该包括什么或起什么作用.这回就简单地介绍下语法及代码文件的结构. ...