微信小程序上传图片组件，多选+单选+预览+删除

微信小程序上传图片+预览+删除

组件代码

HTML

<view class="uploadImg-wrap"><view class="upload-flex"><view wx:if="{{imgs.length!==total}}" bindtap='toUpload' class="upload-item" style="width:{{itemWidth}}px;height:{{itemWidth}}px"><view class="iconfont icon-upload"></view><view class="upload-text">上传图片</view></view><view bindtap='preview' wx:for="{{imgs}}" wx:key="key" class="upload-item-1" style="width:{{itemWidth}}px;height:{{itemWidth}}px" data-url='{{item}}'><image mode="aspectFit" style="width:100%;height:100%" src="{{item}}"></image><view catchtap='del' data-url='{{item}}' class="upload-close"><view class="iconfont icon-close" style="font-size:28rpx"></view></view></view></view>
</view>

CSS

@font-face {font-family: 'iconfont';  /* Project id 2580604 */src: url('//at.alicdn.com/t/font_2580604_kuvkydxjryh.woff2?t=1622731856871') format('woff2'),url('//at.alicdn.com/t/font_2580604_kuvkydxjryh.woff?t=1622731856871') format('woff'),url('//at.alicdn.com/t/font_2580604_kuvkydxjryh.ttf?t=1622731856871') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-close:before {content: "\e668";}.icon-upload:before {content: "\e682";}.icon-caps-lock:before {content: "\e667";}.icon-switch:before {content: "\e67f";}.icon-arrow-right:before {content: "\e665";}.icon-search:before {content: "\e67d";}.icon-arrow-left-bold:before {content: "\e685";}.uploadImg-wrap {width: 100%;}.upload-item {border: 1rpx solid rgb(226, 226, 226);display: flex;justify-content: center;align-items: center;flex-direction: column;box-sizing: border-box;}.upload-text {font-size: 28rpx;}.upload-flex {display: flex;flex-wrap: wrap;}.upload-item-1 {border: 1rpx solid rgb(226, 226, 226);padding: 10rpx;display: flex;justify-content: center;align-items: center;flex-direction: column;box-sizing: border-box;position: relative;
}
.upload-close {width: 40rpx;height: 40rpx;border-radius: 50%;border: 1rpx solid rgb(116, 116, 116);position: absolute;top: 0;left: 0;display: flex;justify-content: center;align-items: center;color: rgb(116, 116, 116);
}

Component({lifetimes: {attached: function () {// 在组件实例进入页面节点树时执行},ready: function () {let that = thisthis.createSelectorQuery().select('.uploadImg-wrap').boundingClientRect(rect => {that.setData({itemWidth: rect.width / 4})console.log(rect.width);}).exec();}},/*** 组件的属性列表*/properties: {//上传图片接口uploadUrl: {type: String,value: 'https://example.weixin.qq.com/upload'},//最大一次性图片数count: {type: Number,value: 4},//总图片数total: {type: Number,value: 4}},/*** 组件的初始数据*/data: {itemWidth: 0,imgs: []},/*** 组件的方法列表*/methods: {//预览preview(options){let imgs = this.data.imgs//后端返回只有名字// let newimgs = []// imgs.forEach(value=>{//   newimgs.push('服务器url' +value)// })// wx.previewImage({//   current: '服务器url'+options.currentTarget.dataset.url,//   urls: newimgs// })//后端返回的图片具体路径wx.previewImage({current: options.currentTarget.dataset.url,urls: imgs})},//删除图片del(options){let url = options.currentTarget.dataset.urllet oldimgs = this.data.imgslet imgs = oldimgs.filter(value=>{if(value!=url){return value}})this.setData({imgs})},//上传图片upload(tempFilePaths, i) {wx.showLoading({title: '上传中',})let that = thiswx.uploadFile({url: that.data.uploadUrl,filePath: tempFilePaths[i],name: 'file',success(r) {//这里只需要修改JSON.parse(r.data).data.url 确保得到的是图片路径，取数据按实际返回结果let url = JSON.parse(r.data).data.url//endlet imgs = that.data.imgsimgs.push(url)that.setData({imgs}, _ => {that.triggerEvent("action",that.data.imgs);if (i == tempFilePaths.length - 1) {wx.hideLoading()return}that.upload(tempFilePaths, i + 1)})}})},toUpload() {let that = thiswx.chooseImage({count: that.data.count,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {let tempFilePaths = res.tempFilePathsthat.upload(tempFilePaths, 0)}})},}
})

页面调用

<uploadImg uploadUrl='上传图片接口' bind:action='action'></uploadImg>

const app = getApp()Page({data: {show:'none'},
//组件上传文件图片后调用的当前页面方法action(data){console.log('图片路径',data.detail)},onLoad() {},
})

微信小程序上传图片组件，多选+单选+预览+删除相关推荐

微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...
微信小程序多图片上传支持预览删除设置数量上限
github地址: https://github.com/Volcano-Yang/miniprogram-picture-upload Miniprogram-Picture-Upload 努力帮助 ...
微信小程序功能：商品收藏-图片预览-客服-分享-加入购物车
微信小程序–商品详情页面包含功能点: 商品收藏图片预览客服分享加入购物车跳转到购物车页面(注意:open-type="switchTab") 结构:goods_deta ...
uniapp实现h5、app、微信小程序三端pdf文件下载和预览
以下代码兼容三端,app,h5,微信小程序,经过个人测试手机端有两种方法,使用renderjs或者uniapp的api 两者的区别使用renderjs的写法,会提示用户是否下载文件,下载完成后用户 ...
微信小程序系列——点击图片放大预览
需求开发的时候,把图片放到页面上,点击图片没有任何反应,不能放大也不能缩小这怎么能行!!! 所以需求来了:点击图片能够把图片弹出来,这样就能放大图片看细节了! 实现步骤微信提供了预览图片的接口, ...
微信小程序：previewImage实现图片放大预览效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言前言记录一下做项目的过程中遇到的图片放大预览效果的实现实现的是点击图片可以放大预览,这个效果在京东淘宝都可以看到 ...
微信小程序：点击图片进行预览
在开发需求中,经常有类似与九宫格的图片展示,当点击图片时进行图片的预览,如果多图的情况还可以左右滑动. 小程序中具体实现效果如下: WXML <view class='imgList'> ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
适配mpvue平台的的微信小程序日历组件mpvue-calendar
mpvue-calendar 基于vue-calendar的适配mpvue平台的的微信小程序日历组件预览安装 npm i mpvue-calendar 使用 import Calendar fro ...

微信小程序上传图片组件，多选+单选+预览+删除

微信小程序上传图片+预览+删除

微信小程序上传图片组件，多选+单选+预览+删除相关推荐

最新文章

热门文章