微信小程序上传图片（多张/单张）

微信小程序上传图片

abc.wxml页面

<view class="three">图片</view><view class="weui-uploader"><view class='pics' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"><image class='weui-uploader__img' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"><icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon></image></view><view class="tp_cont {{tj_ycang?'':'hide'}}" bindtap="chooseImg"><view class="tp_add">+</view></view></view>

abc.js页面

// pages/abc/abc.js
const app = getApp();Page({data: {imgs: []},// 上传图片chooseImg: function (e) {var that = this;var imgs = this.data.imgs;if (imgs.length >= 9) {this.setData({lenMore: 1});setTimeout(function () {that.setData({lenMore: 0});}, 2500);return false;}wx.chooseImage({// count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;var imgs = that.data.imgs;// console.log(tempFilePaths + '----');for (var i = 0; i < tempFilePaths.length; i++) {if (imgs.length >= 9) {that.setData({imgs: imgs});return false;} else {imgs.push(tempFilePaths[i]);}}// console.log(imgs);that.setData({imgs: imgs});wx.uploadFile({url: getApp().globalData.url+'/home/login/uploadQuestionFile', //接受图片的接口地址filePath: tempFilePaths[0],name: 'file',formData: {'user': 'test'},success (res){console.log(res);const data = res.data//do something}})}});},// 删除图片deleteImg: function (e) {var imgs = this.data.imgs;var index = e.currentTarget.dataset.index;imgs.splice(index, 1);this.setData({imgs: imgs});},// 预览图片previewImg: function (e) {//获取当前图片的下标var index = e.currentTarget.dataset.index;//所有图片var imgs = this.data.imgs;wx.previewImage({//当前显示图片current: imgs[index],//所有图片urls: imgs})}})

abc.wxss页面

/* 图片 */
.three{margin-top: 27rpx;
}
.weui-uploader{margin-top: 16rpx;
}
.tp_add{width: 152rpx;height: 152rpx;border-radius: 10rpx;opacity: 1;border: 2rpx dashed #999999;display: flex;justify-content: center;align-items: center;font-size: 59rpx;
}.pics {float:left;position:relative;margin-right:15px;margin-bottom:15px;}.pics image{width: 152rpx;height: 152rpx;}.delete-btn{width: 20rpx;height: 20rpx;position: absolute;top: -15rpx;right: -5rpx;}.weui-uploader{padding: 10rpx;}

微信小程序上传图片（多张/单张）相关推荐

微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...
微信小程序上传图片写法
微信小程序上传图片小程序上传图片需要用到小程序API中的wx.uploadFile()方法.以下是一个基本的示例代码: wx.chooseImage({count: 1,sizeType: ['or ...
微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?
微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧,但是把图片上传到服务器就不一定了,下面一起随小编看看微信小程序怎么上传图片到服务器吧. 微信小程序怎么上传图片到服务器? 首先, ...
微信小程序上传图片组件，多选+单选+预览+删除
微信小程序上传图片+预览+删除组件代码 HTML <view class="uploadImg-wrap"><view class="upload-f ...
微信小程序上传图片到七牛云
七牛云上传图片第一次用七牛云,目的是存储一些图片 1.首先是七牛云的注册,很简单. 2.注册完创建新的空间 3.这时候会自动分配给你一个域名,但是有效期是30天. 4.若要长久使用,最好用自己的域名 ...
uni-app微信小程序上传图片封装
概述 uni-app 微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示上传图标 c ...
微信小程序上传图片及文件（上传、下载、删除及预览）
微信小程序上传附件上传文件及图片下载,预览.删除自定义封装组件哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件(我是子组件)</view> --& ...

微信小程序上传图片（多张/单张）

微信小程序上传图片

微信小程序上传图片（多张/单张）相关推荐

最新文章

热门文章

微信小程序 上传图片（多张/单张）

微信小程序 上传图片

微信小程序 上传图片（多张/单张）相关推荐

最新文章

热门文章

微信小程序上传图片（多张/单张）

微信小程序上传图片

微信小程序上传图片（多张/单张）相关推荐