微信小程序自定义图片上传组件

实现功能：

点击上传按钮可上传图片，并且可定义最多可上传的图片数量、限制图片的大小、类型和来源。
点击图片可预览图片。
点击删除按钮可删除图片。

<!-- image-upload.wxml -->
<view class="container"><view class="image-item" wx:if="{{files.length}}" wx:for="{{files}}" wx:key="*this"><image class="image" src="{{item}}" mode="aspectFill" data-index="{{index}}" bindtap="handlePreviewImage"></image><view class="delete-icon" data-index="{{index}}" bindtap="handleDeleteImage">X</view></view><!-- 图片数量小于最多可上传的图片数量，则显示选择图片的按钮 --><view class="choose-image" wx:if="{{files.length < maxCount}}" bindtap="handleChooseImage">+</view>
</view>

// image-upload.js
Component({properties: {// 展示的图片列表files: {type: Array,value: [],},// 最多可上传的图片数量maxCount: {type: Number,value: 1,},// 单张图片的大小限制，单位 Msize: {type: Number,value: 1,},// 图片大小类型。original：原图，comperssed：压缩图sizeType: {type: Array,value: ['original', 'comperssed'],},// 图片来源类型。album：从相册选图，camera：使用相机sourceType: {type: Array,value: ['album', 'camera'],}},methods: {// 预览图片handlePreviewImage: function(e) {const {index} = e.currentTarget.datasetconst {files} = this.datawx.previewImage({urls: files,current: files[index],})},// 删除图片handleDeleteImage: function(e) {const {index} = e.currentTarget.datasetlet files = [...this.data.files]files.splice(index, 1)this.setData({files})},// 选择图片handleChooseImage: async function() {const {files, maxCount, sizeType, sourceType, size} = this.data// 选择图片const res = await wx.chooseMedia({mediaType: 'image',count: maxCount - files.length,sourceType,sizeType,})// 校验图片大小是否合法const illegal = res.tempFiles.some(item => item.size > (size * 1024 * 1024))if (illegal) {return wx.showToast({title: `图片大小不能超过${size}M`,icon: 'none',})}// 获取到图片的本地临时路径 const chooseImages = res.tempFiles.map(item => item.tempFilePath)// 调用后端接口上传图片，获取图片的真实地址chooseImages.forEach((item, index) => {wx.uploadFile({url: 'https://test/file/upload', // 上传文件的服务器接口地址filePath: item,name: index,success: function(res) {this.setData({files: [...this.data.files, res.data.url]})},fail: function(e) {wx.showToast({title: `第${index + 1}张图片上传失败`,icon: 'none',})}})})}},
})

/* image-upload.wxss */
.container {display: flex;flex-wrap: wrap;
}
.image-item {width: 200rpx;height: 200rpx;margin: 20rpx;position: relative;
}
.image {width: 100%;height: 100%;
}
.delete-icon {width: 50rpx;height: 50rpx;background: #888888;color: #fff;opacity: .8;border-radius: 50%;position: absolute;z-index: 9999;top: -18rpx;right: -18rpx;display: flex;align-items: center;justify-content: center;
}
.choose-image {width: 200rpx;height: 200rpx;margin: 20rpx;border: 2rpx dotted #888888;font-size: 80rpx;color: #888888;display: flex;align-items: center;justify-content: center;
}

微信小程序自定义图片上传组件相关推荐

【微信小程序】图片上传组件“mp-uploader“(weui)
使用示例 wxml <mp-uploader files="{{files}}" max-count="{{maximgs}}" max-size=& ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序多图片上传支持预览删除设置数量上限
github地址: https://github.com/Volcano-Yang/miniprogram-picture-upload Miniprogram-Picture-Upload 努力帮助 ...
微信小程序多图片上传全栈实战
本篇教程技术栈:springBoot(Java后端)+ 微信小程序.完整的图片上传教程. 页面截图,点击图片右上角按钮可以删除图片. 1.图片上传需要使用wx.uploadFile(Object o ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
微信小程序之图片上传、多图上传、头像上传、头像获取、图片上传失败问题解决
小程序用户授权获取用户头像,需点击才可以让用户选择是否授权. 图片上传失败问题解决图片上传一定要记得修改合法域名,不然会失败,而且找不到报错信息哟!并且域名采用 https 点击,用户授权,获取用 ...
微信小程序实现图片上传（清晰版）
在wxml文件中添加一个按钮和一个image标签用于显示上传的图片 <view><button bindtap="chooseImage">选择图片< ...
微信小程序之图片上传之巨坑
写这个随笔的目的是想让遇到这个坑的人少点时间去填坑先附上小程序前端和java端代码 startUpload: function(){ wx.chooseImage({ success: functi ...

微信小程序自定义图片上传组件

微信小程序自定义图片上传组件相关推荐

最新文章

热门文章