--

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();
}
}
})
}
})
} },

--

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

  1. 微信小程序上传多张图片,及php后台处理

    微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{wi ...

  2. 微信小程序上传Excel文本文件功能

    问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...

  3. 小程序上传多图片多附件多视频 c#后端

    前言: 最近在研究微信小程序,本人自己是C#写后端的;感觉小程序挺好玩的,就自己研究了一下:刚好今天又给我需求,通过小程序上传多图 然后C#后端保存到服务器: 用NET明白 前端上传需要用到流,然后就 ...

  4. 微信小程序上传与下载文件

    需要准备的工作: ①.建立微信小程序工程,编写以下代码. ②.通过IDE建立springboot+web工程,编写接收文件以及提供下载文件的方式,并将上传的文件相关信息记录在mysql数据库中.具体请 ...

  5. 微信小程序上传后发布或者体验版测试无数据解决办法

    在做微信小程序开发的过程中,发现小程序在本地调用接口的数据都显示,但是上传之后,发现手机体验没有数据.以下为解决办法: 1.先清除缓存试试. 2.打开微信小程序工具右上角的详情——项目设置,将“不校验 ...

  6. Taro 微信小程序 上传文件到minio

    小程序前端上传文件不建议直接引用minio的js npm包,一来是这个包本身较大,会影响小程序的体积,二来是ak sk需要放到前端存储,不够安全,因此建议通过请求后端拿到签名数据后上传. 由于小程序的 ...

  7. 微信小程序-上传照片-多张显示

    图片就是一个简单的效果 实现 先看wxml和wxss代码 <view class='in-demand'> <view class='dema-title'> <text ...

  8. 微信小程序 上传图的功能

    首先选择图片,然后循环,再就是在点击发布的时候循环图片地址赋值,包括删除命令 js代码: //选择图片 uploadImgAdd: function(e) { var imgs = this.data ...

  9. 微信小程序上传Word文档、PDF、图片等文件

    <view class="main" style="border:none"> <view class="title"&g ...

随机推荐

  1. Gitlab配置webhooks实现自动化部署

    Gitlab 自动化部署 原理介绍 配置gitlab当push动作的时候,访问服务器上的一个链接比如www.shenke.group/hook.php hook.php里面写着一行代码,会让服务器gi ...

  2. VS2017 密钥

    需要的请自取- Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Professional: KBJFW-NXHK6-W4WJM-CRMQB-G3CDH

  3. python基础-模块(全是理论,没有代码)

    模块 概念:一系列功能的结合体.相当于模块包着一堆函数与代码.本质上是py文件. 来源: python内置的模块----→ python解释器的模块 第三方的模块 -----→ 其他人编写提供的 自定 ...

  4. 【DATAGUARD】物理dg在主库丢失归档文件的情况下的恢复(七)

    [DATAGUARD]物理dg在主库丢失归档文件的情况下的恢复(七) 一.1  BLOG文档结构图 一.2  前言部分 一.2.1  导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到 ...

  5. 华为云主机配置yum源

    问题: 拥有华为主机,配置华为云mirrors,不走公网流量加速体验 系统: centos7.6 解决: 01.华为云mirrors https://mirrors.huaweicloud.com/ ...

  6. 实验之RSTP基础配置

    STP升级版之RSTP 实验环境 实验拓扑图 实验编址 实验步骤 1.基本配置配置PC端 测试i相通性 2.配置RSTP基本功能在S1-S4上都使用命令stp mode rstp更改生成树模式(因为华 ...

  7. HTML&CSS基础-html的图片标签

    HTML&CSS基础-html的图片标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,准备一张图片,存放路径和html文件在同一目录 二.HTML源代码 ...

  8. NODE简易综合应用服务器搭建

    node搭建简易服务器 querystring和url模板学习地址 querystring&url 1. 目录结构 2. 代码结构 const http = require('http'); ...

  9. 类型擦除对Java调用Kotlin的影响

    @JvmName: 扩展方法相关: 先来定义一个扩展方法: 好,接下来再来定义一个扩展函数: 此时报错了..看一下错误提示: 其中给的提示有点奇怪,第一个是很明显咱们的扩展函数木有接收参数嘛,为啥提示 ...

  10. 聊聊rocketmq的ConsumeMode.CONCURRENTLY

    序 本文主要研究一下rocketmq的ConsumeMode.CONCURRENTLY ConsumeMode.CONCURRENTLY rocketmq-spring-boot-2.0.4-sour ...