在小程序中制作类似微信客户端中上传图片功能。
功能一：可单独上传一张图片
功能二：可多张上传
功能三：可点击删除图片
wxml：
<view class='photo'>
<view class='title'>
图片
</view>
<view class='up-pic'>
<view class='flex pic-box'>
<block wx:key="imgbox" wx:for="{{imgbox}}">
<view class='ap-box'>
<view class='add-pic'>
<image class='add-pic' src='{{item}}' bindtap="previewImage" data-index='{{index}}'></image>
<view class='img-de' data-deindex='{{index}}' bindtap='imgDelete1'>
<image class='img' src='../../../assets/images/remove.png'></image>
</view>
</view>
</view>
</block>
<view class='add-pic' bindtap='addPic1' wx:if="{{imgbox.length<9}}">
<image class='img' src='../../../assets/images/addPhoto.png'></image>
</view>
</view>
</view>
</view>
wxss:
/* 上传图片部分 */
.photo {display: flex;flex-direction: column;justify-content:center;align-items: flex-start;padding: 0 31.2rpx;border-bottom:1px solid #e7e7e7;padding-bottom:23.4rpx;}
.photo .title {margin-top:31.2rpx;}
.flex{display:flex;}
.up-pic{display:flex;justify-content:flex-start;align-items:center;}
.pic-box{flex-flow:wrap;}
.ap-box{position:relative;}
.add-pic{width:124.8rpx;height:124.8rpx;margin-right:45rpx;margin-bottom:23.4rpx;position:relative;}
.add-pic image {width:124.8rpx;height:124.8rpx;margin-top:10rpx;}
/* 删除图片 */
.img-de{width:40rpx;height:40rpx;border-radius:50%;position:absolute;right:-10rpx;top:-10rpx;}
.img-de image {width:40rpx;height:40rpx;}
点击上传图片功能，使用选择照片 wx.chooseImage() 和上传 wx.uploadFile()：
// 上传图片 &&&
addPic1: function (e) {
var imgbox = this.data.imgbox;
var that = this;
var n = 9;
var urlList = []
if (9 > imgbox.length > 0) {
n = 9 - imgbox.length;
} else if (imgbox.length == 9) {
n = 1;
}
wx.chooseImage({
count: n, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
console.log(res)
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
if (9 > imgbox.length) {
if (imgbox.length == 0) {
imgbox = tempFilePaths
} else {
imgbox = imgbox.concat(tempFilePaths);
}
wx.showLoading({ // 添加loading状态
title: '上传中',
})
if (res.tempFilePaths.length !== 1) {
for (var i = 0; i < res.tempFilePaths.length; i++) {
wx.uploadFile({
url: 'xxx', // 接口地址
filePath: res.tempFilePaths[i], // 上传文件的临时路径
name: 'file',
formData: { // 上传路径等参数
type: 0,
project: "aaa", // 项目名称
path: "bbb" // 项目路径文件夹
},
success(res) {
// 采用选择几张就直接上传几张，最后拼接返回的url
wx.hideLoading()
var obj = JSON.parse(res.data)
var more = []
more.push(obj.url)
var tem = that.data.imageUrl
that.setData({
imageUrl: tem.concat(more)
})
}
})
}
} else {
wx.uploadFile({
url: 'https://image.tyunfarm.com/Project/SaveProjectImage',
filePath: res.tempFilePaths[0],
name: 'file',
formData: {
type: 0,
project: "bcmoa",
path: "notice"
},
success(res) {
// console.log(res)
wx.hideLoading()
var obj = JSON.parse(res.data)
urlList.push(obj.url);
var tem = that.data.imageUrl
that.setData({
imageUrl: tem.concat(urlList)
})
}
})
}
} else {
imgbox[picid] = tempFilePaths[0];
}
that.setData({
imgbox: imgbox
});
}
})
},
这里暂时采用选择几张张图片就上传几张到文件服务器得到返回的 url 拼接成真是图片地址数组。选择即上传。并不是说选择图片之后确定图片内容后再一并上传。
删除照片，即切掉临时文件中的url和真实文件的url：
// 删除照片 &&
imgDelete1: function (e) {
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgbox = this.data.imgbox;
let imageUrl = this.data.imageUrl;
imgbox.splice(index, 1)
imageUrl.splice(index, 1)
that.setData({
imgbox: imgbox,
imageUrl: imageUrl
});
},
最后提交该数据时，向服务器提交的是真实图片地址的url。
图片预览大图，使用 wx.previewImage() :
// 点击预览大图
previewImage(e) {
var current = this.data.imgbox[e.target.dataset.index]
wx.previewImage({
current: current, // 当前显示图片的http链接
urls: this.data.imgbox // 需要预览的图片http链接列表
})
},
网友评论