微信小程序图片(单图多图上传显示)

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

最近在做微信小程序开发的时候，遇到了一个问题，就是图片上传于显示问题，微信自带的感觉用起来还是不方便，于是就萌生了自定义图片上传于显示组件

废话不多说直接上代码

首先创建一个imageview component组件，

1.wxml

</view>

</view>

2.wxss

.img-list {

display: flex;

align-items: flex-start;

flex-direction: row;

flex-wrap: wrap;

}

.item{

position: absolute;

}

.img-list .item {

width: 160rpx;

margin-left: 10rpx;

position: relative;

}

.img-list .item:first-child {

margin: 0;

}

.img-list .img {

width: 160rpx;

height: 160rpx;

border-radius: 10rpx;

/* background-color: rgba(0, 0, 0, .1); */

overflow: hidden;

}

.img-list .item .del {

text-align: center;

color: #ffffff;

background: #FF3434;

position: absolute;

top: 0;

right: 0;

z-index: 999;

border-top-right-radius: 10rpx;

}

.del image{

width: 28rpx;

height: 25rpx;

}

.img-list .add {

display: inline-block;

position: relative;

width: 160rpx;

height: 160rpx;

border-radius: 10rpx;

background-color: rgba(0, 0, 0, .1);

}

.img-list .add::after {

display: block;

position: absolute;

left: 50%;

top: 50%;

content: '+';

margin-top: -4rpx;

font-size: 80rpx;

color: white;

transform: translate(-50%,-50%);

}

3.json

{

"component": true,

"usingComponents": {}

}

4.js文件

Component({

/**

* 组件的属性列表

properties: {

imgs: {

type: String,

value: ''

maxCount: { // 最大上传数量

type: Number,

value: 9

disable: { // 是否禁用

type: Boolean,

value: false

maxSize: { // 图片大小，以 M 为单位

type: Number,

value: 10

showDel: {

type: Boolean,

value: true

imgList: {

type: Array,

value: []

/**

* 组件的初始数据

data: {

imgList: [],

showDel: false

/**

* 在组件实例进入页面节点树时执行

attached() {

this.setImgList(this.data.imgs.split(';').filter(item => item))

/**

* 组件的方法列表

methods: {

setImgList(data) {

this.setData({

imgList: data

})

// 给父组件传递图片

this.triggerEvent('upimgs', this.data.imgList.join(';'))

upload() {

wx.chooseImage({

count: 1,

sizeType: ['original', 'compressed'],

sourceType: ['album', 'camera'],

success: (res) => {

//res.tempFilePaths 返回图片本地文件路径列表

var imgList = this.data.imgList;

// 限制上传图片大小

if (this.data.maxSize * 1024 * 1024 < res.tempFiles[0].size) {

wx.showToast({

title: "上传文件过大，不可超过" + this.data.maxSize + "M！",

icon: "none",

});

return false

}

var access_token = wx.getStorageSync('access_token')

if (res.tempFilePaths.length > 0) {

for (var i = 0; i < res.tempFilePaths.length; i++) {

wx.uploadFile({

//网络请求

})

}

})

// 预览图片

preview(e) {

wx.previewImage({

current: e.currentTarget.dataset.img, // 当前显示图片的http链接

urls: [e.currentTarget.dataset.img] // 需要预览的图片http链接列表

})

// 删除图片

del(e) {

var imgList = this.data.imgList

imgList.splice(e.currentTarget.dataset.index, 1)

this.setImgList(imgList)

}

})

用法，首先在需要调用的页面的。json文件中引入组件

其次在页面中引用如下

拍照上传之后的回调，可以在当前页面中的。js文件获取

upImgs: function (e) {

console.log("上传图片回传结果==" + e.detail)

this.setData({

filePaths: e.detail,

})

到此就完成了图片上传自定义组件

组件中需要的图片请按自己需求查找

微信小程序图片(单图多图上传显示)相关推荐

微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
小程序录音上传服务器,微信小程序录音实现功能并上传(使用node解析接收)
微信小程序录音实现功能并上传(使用node解析接收) 发布时间:2020-09-04 11:59:06 来源:脚本之家阅读:97 作者:weixin_43188227 背景我在开发小程序的时候,有 ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
微信小程序聊天室+websocket+文件上传（发送图片）
最近哥们在写微信小程序,其中有个需求是搭建一个聊天室,可多人聊天,可私聊,可发送图片.但是由于一直没有这方面相关的了解,于是慢慢的去看,去做,前期真的很困难,路子不好走,慢慢的再搭建. 先看看效果吧 ...
微信小程序环境下将文件上传到 OSS
步骤 1: 配置 Bucket 跨域客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...
微信小程序上传图片及文件（上传、下载、删除及预览）
微信小程序上传附件上传文件及图片下载,预览.删除自定义封装组件哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件(我是子组件)</view> --& ...
Udesk对接微信小程序实现商品浏览轨迹上传
作者:张振琦 Udesk提供了小程序专用的行为轨迹SDK,可以用来收集客户的商品浏览轨迹,并在客服对话窗口中访问轨迹处可以查看. 在开发之前,需要先完成两个操作: 确认Udesk客服系统内绑定的小程序 ...
Java生成微信小程序二维码、上传至阿里云OSS
依赖 <dependency><groupId>com.aliyun.oss</groupId><artifac ...
小程序上传视频的php接口处理,微信小程序[第十二篇] -- 上传视频
通过上一篇的学习,我们可以成功将宝宝的照片传到指定相册了,但是可爱的宝宝岂能只有照片,小视频必须同步跟上,莫问题!咱这篇就来一个视频上传的实现. 俺家小核桃镇贴. 服务端其实对于yii2程序而言,如 ...

微信小程序图片(单图多图上传显示)

微信小程序图片(单图多图上传显示)相关推荐

最新文章

热门文章