小程序图片上传组件
父组件页面
<uploadImage limitCount="{{50}}" />
子组件上传图片
页面wxml
<!--component/uploadImage/index.wxml-->
<view class="pic_content">
<view class="image item" wx:for="{{imageList}}" wx:key="item">
<image class="pic" data-item="{{item}}" bindtap="previewImg" src="{{item}}" />
<image class="icon_close" src="{{ResourceImageUrl}}/index/narcotics/upload_close.png" data-item="{{item}}" bind:tap="deleteImage" />
</view>
<view class="chooseImage item" bind:tap="chooseImage" wx:if="{{imageList.length<limitCount}}">
<image src="{{ResourceImageUrl}}/index/narcotics/upload.png" />
<view class="count">上传照片</view>
</view>
</view>
页面js
// component/uploadImage/index.js
const common = require('../../js/common')
const myConstants = require('../../js/myConstants')
Component({
properties: {
limitCount: {
type: Number,
value: 4
},
imageList: {
type: Array,
value: []
}
},
data: {
imageList: [], //图片列表
ResourceImageUrl: '/images',
},
methods: {
// 去选择照片
chooseImage() {
// this.properties.limitCount - this.data.imageList.length
wx.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album', 'camera'],
maxDuration: 30,
camera: 'back',
success: (res) => {
// 拿到资源本地临时路径list
let tempFilePaths = res.tempFiles.map(item => item.tempFilePath)
var AccessToken = wx.getStorageSync(myConstants.storageKey.AccessToken)
// 循环上传至服务器
tempFilePaths.forEach(item => {
wx.uploadFile({
//仅为示例,这里换上你们自己的接口地址,由服务端提供
url: common.appurl + myConstants.interfaceUrl.uploadPicture,
filePath: item,
name: 'file',
formData: {
'token': AccessToken
},
success: (res) => {
console.log(res, "上传图片")
var resData = JSON.parse(res.data)
var resText = JSON.parse(resData.resText)
var imgPath = resText.result;
this.triggerEvent('change', [...this.data.imageList, imgPath])
this.setData({
imageList: [...this.data.imageList, imgPath]
})
},
fail(err) {
console.log('上传上传失败', err);
}
})
})
}
})
},
// 删除图片
deleteImage(e) {
let that = this;
let value = e.currentTarget.dataset.item;
var imageLists = that.data.imageList.filter(item => item !== value);
wx.showModal({
title: '提示',
cancelColor: '#333',
confirmColor: '#1483FE',
content: '确认删除吗?',
success(res) {
if (res.confirm) {
that.setData({
imageList: imageLists,
})
that.triggerEvent('change', imageList)
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
/**
* 预览图片
*/
previewImg(e) {
var currIUrl = e.currentTarget.dataset.item
var photoList = this.data.imageList
if (currIUrl) {
wx.previewImage({
current: currIUrl,
urls: photoList
})
}
},
}
})
页面wxss
/* component/uploadImage/uploadImage.wxss */
.pic_content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
padding: 30rpx;
}
.pic_content .image {
width: 240rpx;
height: 240rpx;
border-radius: 10rpx;
margin-bottom: 20rpx;
color: #666;
background: #F7F8FA;
position: relative;
}
.pic_content .image .pic {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.pic_content .image .icon_close {
position: absolute;
top: 0;
right: 0;
width: 40rpx;
height: 40rpx;
}
.pic_content .chooseImage {
width: 240rpx;
height: 240rpx;
border-radius: 10rpx;
color: #666;
background: #F7F8FA;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pic_content .chooseImage image {
width: 56rpx;
height: 56rpx;
margin-bottom: 16rpx;
}
.pic_content .chooseImage .count {
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 28rpx;
color: #999999;
letter-spacing: 0;
line-height: 36rpx;
}