wxml代码：
1. <!-- 图片 -->
2. <view class='upImgTips' wx:if="{{previewImage != ''}}">点击预览图片，长按删除图片</view>
3. <view class='img'>
4. <view class='img_li' bindtap='upload_img'>
5. <text class='iconfont icon-zhaoxiangji'></text>
6. </view>
7. <view class='img_li' wx:for="{{previewImage}}" wx:key="{{index}}">
8. <image bindtap='previewImage' bindlongpress='delImage' data-index="{{index}}" data-src='{{item}}' src='{{item}}' mode='widthFix'></image>
9. </view>
10. </view>
wxss代码：
1. .img {
2. width: 100%;
3. display: flex;
4. flex-wrap: wrap;
5. }
6.
7. .img_li {
8. width: calc((100vw - 50px) / 4);
9. height: calc((100vw - 50px) / 4);
10. border: 1px dashed #4da585;
11. margin-right: 10px;
12. margin-bottom: 10px;
13. text-align: center;
14. line-height: calc((100vw - 50px) / 4);
15. border-radius: 5px;
16. overflow: hidden;
17. }
18.
19. .img_li:nth-child(4n) {
20. margin-right: 0;
21. }
22.
23. .img_li image {
24. width: 100%;
25. }
26.
27. .recorder {
28. margin: 10px 0;
29. }
30.
31. .upImgTips {
32. font-size: 25rpx;
33. margin-bottom: 10px;
34. }
js代码：
1. data: {
2. previewImage:[], // 预览图片地址
3.
4. },
5. // 上传图片
6. upload_img:function(){
7. let that = this;
8. wx.chooseImage({
9. // count: 1, //最多可以选择的图片张数，默认9
10. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
11. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
12. success: function (res) {
13. // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
14. var tempFilePaths = res.tempFilePaths
15. let previewImage = that.data.previewImage;
16. // console.log(res)
17. for (let i = 0; i < res.tempFilePaths.length;i++){
18. previewImage.push(tempFilePaths[i]);
19. }
20. // console.log(previewImage)
21.
22. that.setData({
23. previewImage: previewImage
24. })
25. }
26. })
27. },
28. // 预览图片
29. previewImage:function(e){
30. wx.previewImage({
31. current: '', // 当前显示图片的http链接
32. urls: [e.currentTarget.dataset.src] // 需要预览的图片http链接列表
33. })
34. },
35. // 长按删除图片
36. delImage:function(e){
37. // console.log(e.currentTarget.dataset.index)
38. let _index = e.currentTarget.dataset.index;
39. let previewImage = this.data.previewImage;
40. console.log(previewImage)
41. previewImage.splice(_index,1);
42. this.setData({
43. previewImage: previewImage
44. })
45. },