微信小程序上传单张或多张图片
--
chooseImage: function () {
let that = this;
let worksImgs = that.data.worksImgs;
let len = that.data.worksImgs.length;
wx.chooseImage({
count: - len, //最多选择9张图片
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
console.log(res);
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
if (res.tempFilePaths.count == ) {
return;
}
let tempFilePaths = res.tempFilePaths;
// let token = app.data.uptoken;
//上传图片 循环提交
for (let i = ; i < tempFilePaths.length; i++) {
wx.uploadFile({
url: 'url', //此处换上你的接口地址
filePath: tempFilePaths[i],
name: 'upload_file',
header: {
"Content-Type": "multipart/form-data",
'accept': 'application/json',
},
success: function (res) {
console.log(res);
let data = JSON.parse(res.data); // 这个很关键
worksImgs.push(data.data.url);
that.setData({
worksImgs: worksImgs
})
}
})
}
}
})
},
// 删除上传的图片
deleteImg: function (e) {
var worksImgs = this.data.worksImgs;
var itemIndex = e.currentTarget.dataset.index;
worksImgs.splice(itemIndex, );
this.setData({
worksImgs: worksImgs
})
},
// 提交个人作品
submitWorks:function(){
let that = this;
let worksImgs = String(that.data.worksImgs);
let obj = {
store_id: that.data.store_id,
mode_id: that.data.mode_id,
works_img: worksImgs,
works_info: that.data.works_info,
is_xs :
}
if (obj.works_img.length == || obj.works_info == ''){
wx.showModal({
title: '提示',
content: '数据不能为空!',
showCancel: false,
})
}else{
utils.postRequest('Mode/worksAdd', obj, '加载中', (res) => {
if (res.data.rc == ) {
wx.showModal({
title: '提示',
content: '作品上传成功',
showCancel: false,
success: function (res) {
if (res.confirm) {
that.setData({
isUpWork: false
})
that.onShow();
}
}
})
} else {
wx.showModal({
title: '提示',
content: '作品上传失败',
showCancel: false,
success: function (res) {
if (res.confirm) {
that.setData({
isUpWork: false
})
that.onShow();
}
}
})
}
})
}
},
--
微信小程序上传单张或多张图片的更多相关文章
- 微信小程序上传多张图片,及php后台处理
微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{wi ...
- 微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
- 小程序上传多图片多附件多视频 c#后端
前言: 最近在研究微信小程序,本人自己是C#写后端的;感觉小程序挺好玩的,就自己研究了一下:刚好今天又给我需求,通过小程序上传多图 然后C#后端保存到服务器: 用NET明白 前端上传需要用到流,然后就 ...
- 微信小程序上传与下载文件
需要准备的工作: ①.建立微信小程序工程,编写以下代码. ②.通过IDE建立springboot+web工程,编写接收文件以及提供下载文件的方式,并将上传的文件相关信息记录在mysql数据库中.具体请 ...
- 微信小程序上传后发布或者体验版测试无数据解决办法
在做微信小程序开发的过程中,发现小程序在本地调用接口的数据都显示,但是上传之后,发现手机体验没有数据.以下为解决办法: 1.先清除缓存试试. 2.打开微信小程序工具右上角的详情——项目设置,将“不校验 ...
- Taro 微信小程序 上传文件到minio
小程序前端上传文件不建议直接引用minio的js npm包,一来是这个包本身较大,会影响小程序的体积,二来是ak sk需要放到前端存储,不够安全,因此建议通过请求后端拿到签名数据后上传. 由于小程序的 ...
- 微信小程序-上传照片-多张显示
图片就是一个简单的效果 实现 先看wxml和wxss代码 <view class='in-demand'> <view class='dema-title'> <text ...
- 微信小程序 上传图的功能
首先选择图片,然后循环,再就是在点击发布的时候循环图片地址赋值,包括删除命令 js代码: //选择图片 uploadImgAdd: function(e) { var imgs = this.data ...
- 微信小程序上传Word文档、PDF、图片等文件
<view class="main" style="border:none"> <view class="title"&g ...
随机推荐
- 使用kubeadm搭建高可用k8s v1.16.3集群
目录 1.部署环境说明 2.集群架构及部署准备工作 2.1.集群架构说明 2.2.修改hosts及hostname 2.3.其他准备 3.部署keepalived 3.1.安装 3.2.配置 3.3. ...
- javascript一个在网页上画线的库
文章;安利一个绘制指引线的JS库leader-line 一个在网页上划线的库感觉很不错.
- 基于Java+Selenium的WebUI自动化测试框架(一)---页面元素定位器
对于自动化测试,尤其是UI的自动化测试.是很多做黑盒功能测试的同学,入门自动化测试一个最为直观的或者说最容易理解的途径之一. 对于手工测试和自动化测试的优劣,网上有很多论述,在这里不作展开讨论.但是, ...
- Codeforces F. Vus the Cossack and Numbers(贪心)
题目描述: D. Vus the Cossack and Numbers Vus the Cossack has nn real numbers aiai. It is known that the ...
- Educational Codeforces Round 64 (Rated for Div. 2)题解
Educational Codeforces Round 64 (Rated for Div. 2)题解 题目链接 A. Inscribed Figures 水题,但是坑了很多人.需要注意以下就是正方 ...
- 项目Alpha冲刺——测试
作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 完成项目Alpha冲刺 团队信息 队名:火鸡堂 队员学号 队员姓名 博客地址 ...
- 项目Alpha冲刺总结随笔
班级:软件工程1916|W 作业:项目Alpha冲刺 团队名称:SkyReach 目标:完成项目Alpha版本 项目Github地址 团队博客汇总 队员学号 队员姓名 个人博客地址 备注 221600 ...
- 大数据开发之keras代码框架应用
总体来讲keras这个深度学习框架真的很“简易”,它体现在可参考的文档写的比较详细,不像caffe,装完以后都得靠技术博客,keras有它自己的官方文档(不过是英文的),这给初学者提供了很大的学习空间 ...
- 常用Maven插件介绍(转载)
我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...
- 学习Spring-Data-Jpa(十一)---抓取策略与实体图
1.抓取策略 在前面说到的关联关系注解中,都有一个fetch属性,@OneToOne.@ManyToOne中都默认是FetchType.EAGER,立即获取.@OneToMany.@ManyToMan ...