小程序之上传多张图片

上传组件uploadImg文件夹(有uploadImg.wxml、uploadImg.wxss、uploadImg.js、uploadImg.json)

uploadImg.wxml:

<view class="uploadImg-wrap"><view class="imgList-wrap"><view class="upload-list-item" wx:for="{{imgList}}" wx:key="index" wx:for-index="index" wx:for-item="item" bindtap="viewImage" data-url="{{item}}"><image class="card-img" src="{{item}}"></image><view class="icon-delete" catchtap="delImg" data-index="{{index}}"><image class="icon-delete" mode="widthFix" src="../../static/common/icon-delete.png"></image></view></view><view class="add-wrap" bindtap="chooseImg" wx:if="{{imgList.length<maxCount}}"><image class="icon-camera" mode="widthFix" src="../../static/common/icon-camera.png"></image><view class="add-title">{{title}}</view></view></view>
</view>

uploadImg.wxss:

.uploadImg-wrap {width: 100%;padding: 0 10rpx;box-sizing: border-box;
}
.uploadImg-wrap .imgList-wrap {overflow: hidden;display: grid;grid-template-columns: 33.33% 33.33% 33.33%;justify-items: center;
}
.uploadImg-wrap .imgList-wrap .upload-list-item {position: relative;width: 200rpx;height: 200rpx;margin-top: 30rpx;
}
.uploadImg-wrap .imgList-wrap .upload-list-item .card-img {width: 100%;height: 100%;vertical-align: middle;pointer-events: auto;border-radius: 8rpx;border: 1px dashed #979797;
}
.uploadImg-wrap .imgList-wrap .upload-list-item .icon-delete {width: 40rpx;position: absolute;right: -10rpx;top: -10rpx;
}
.uploadImg-wrap .add-wrap {width: 200rpx;height: 200rpx;border: 1px dashed #979797;border-radius: 8rpx;background: #f9fafb;text-align: center;margin-top: 30rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;
}
.uploadImg-wrap .add-wrap .icon-camera {width: 80rpx;height: 80rpx;pointer-events: none;
}
.uploadImg-wrap .add-wrap .add-title {color: #333333;
}

uploadImg.js:

import { API_URL } from "../../common/request.js"
Component({lifetimes: {created: function () { },attached: function () {this.data.imgList = [];var imgD = this.data.imgList;imgD = imgD.concat(this.data.pageImgList);this.setData({imgList: imgD});},// 数据监听observers: {pageImgList(val) {var that = this;that.data.imgList = [];var imgD = this.data.imgList;imgD = imgD.concat(val);this.setData({imgList: imgD});}}},/*** 组件的属性列表*/properties: {pageImgList: {type: Array,required: true,value() {return [];}},/* 每次选择X张照片 */imgCount: {type: Number,value: 9,},/* 最多上传几张照片 */maxCount: {type: Number,value: 9,},title: {type: String,value: '上传图片',},name: {type: String,value: ''},// 图片类型category: {type: String,value: ' public'}},/*** 组件的初始数据*/data: {imgList: [],},/*** 组件的方法列表*/methods: {chooseImg() {var that = this;wx.chooseImage({count: this.data.imgCount, //默认9sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有success: (res) => {// 上传多张图片that.uploadImg(res.tempFilePaths);}});},uploadImg(tempFilePaths) {// 文件上传的函数，返回一个promisewx.showLoading({ title: '上传中...' })return new Promise((resolve, reject) => {var that = this;var tempImgUrls = that.data.imgList;for (var i = 0; i < tempFilePaths.length; i++) {wx.uploadFile({url: API_URL + 接口地址, //需要用HTTPS，同时在微信公众平台后台添加服务器地址filePath: tempFilePaths[i], //上传的文件本地地址name: 'file',header: {'content-type': 'multipart/form-data','cookie': wx.getStorageSync('cookie')},formData: {category: this.data.category},//附近数据，这里为路径success: function (res) {wx.hideLoading();if (res.statusCode == 200) {var result = JSON.parse(res.data);if (result.status) {var imgUrl = result.data;tempImgUrls.push(imgUrl);that.setData({imgList: tempImgUrls})if (i == tempFilePaths.length) {that.triggerEvent("syncImages", {list: tempImgUrls,name: that.data.name});resolve();}} else {reject(result.errMsg);}} else {reject(res);}},fail: function (err) {console.log(err);}});}});},delImg(e) {var that = this;wx.showModal({title: '提示',content: '确定要删除吗？',success: res => {if (res.confirm) {var imgL = that.data.imgList;imgL.splice(e.currentTarget.dataset.index, 1);that.setData({imgList: imgL})that.triggerEvent("syncImages", {list: imgL,name: that.data.name});}}})},viewImage(e) {wx.previewImage({urls: this.data.imgList,current: e.currentTarget.dataset.url});},}
})

调用该上传组件

1.在父组件的.json文件里先引入该组件

{"usingComponents": {"upload-img":"../../components/uploadImg/uploadImg"}
}

2.在.wxml文件里

<upload-img name="IdCard" pageImgList="{{formInfo.IdCard}}" maxCount="9"  bind:syncImages="editImg"></upload-img>

3.在.js文件里

/*** 页面的初始数据*/data: {formInfo: {IdCard: []}},

加以下方法函数

editImg(e) {var formD = this.data.formInfo;formD[e.detail.name] = e.detail.list;this.setData({formInfo: formD})},

小程序之上传多张图片相关推荐

微信小程序上传多张图片，上传文件pdf等
wx.getFileSystemManager().readFileSync同步循环数组是可以拿到值的 wx.getFileSystemManager().readFile异步,但是加了这个就一直是空 ...
微信小程序上传多张图片
开发微信小程序时,时常会用到多图上传的情况,由于微信API的特性,一次只能上传一张图片,然而实际的情况是我们通常会要求一次上传多张图片,所以只能通过循环调用 wx.uploadFile 来实现上传多张 ...
微信小程序上传多张图片到服务器,怎么在微信小程序中同时上传多张图片
怎么在微信小程序中同时上传多张图片发布时间:2021-04-16 18:05:52 来源:亿速云阅读:99 作者:Leah 今天就跟大家聊聊有关怎么在微信小程序中同时上传多张图片,可能很多人都不太 ...
微信小程序之上传附件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 目前微信API开放上传图片,录音文件,视频文件,but 只能下载并打开附件,不能上传附件,以后会不会开 ...
微信小程序上传多张图片
小程序会用到一些上传的模块,这里分享一下小程序原生上传的插件,转自朋友的博客. HTML部分: <view class='up-pic'><vi ...
微信小程序-上传多张图片加进度，持续修正中……
tips.参考网上资料的改进版 1.怎么使用.html <up-picurl="{{u ...
微信小程序-上传多张图片加进度条（支持预览、删除）
2018-12-24 详情示例见:https://www.cnblogs.com/cisum/p/9564898.html 2018-12-29 组件下载见:https://www.cnblogs.c ...
阿里云 aliyun 人脸识别（1：N） java spring 小程序小程序上传多图阿里云oss
前段时间开发一个小程序需要使用到阿里云(1:N)人脸识别的服务,查询资料发现网上并没有详细的教程,而官方的api文档也写得很简略,于是就有了如下教程,希望能帮助到大家. 目录服务开通人脸识别服务开 ...
微信小程序上传文件组件
微信小程序上传文件一.说明该拍照组件带有微信授权相机功能,会结合后端接口,将上传的图片以数组集合的形式传值给父级页面. 注意:组件适用于,单独上传图片,不携带参数,结合后端接口返回路径之后,再调用 ...

小程序之上传多张图片

小程序之上传多张图片相关推荐

最新文章

热门文章