微信小程序实现图片是上传预览功能

Posted seasonzone

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序实现图片是上传预览功能相关的知识，希望对你有一定的参考价值。

本文实例讲述了微信小程序实现图片上传、删除和预览功能的方法，分享给大家供大家参考，具体如下：

这里主要介绍一下微信小程序的图片上传图片删除和图片预览

 

 

1、可以调用相机也可以从本地相册选择

2、本地实现微信小程序的上传照片、预览照片的功能

3、利用wx.chooseImage方法

4、附带了一些表单样式（可以忽略）

代码如下

wxml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
  <view class="numberInfo">
 ** 信息录入</view>
 
<view class="container">
 
  <view class="lineHeight" type="number">手机号
     <input class=\'input\' placeholder=\'请输入手机号\'></input>
  </view>
    <view class="lineHeight" type="text">姓名
     <input class=\'input-15\' placeholder=\'姓名\'></input>
  </view>
  <view class="lineHeight" type="text">公司名称
     <input class=\'input-7\' placeholder=\'公司名称\'></input>
  </view>
  <view class="lineHeight">公司电话
      <input class=\'input-7\' type=\'number\' placeholder=\'区号\'></input>
  </view>
  <view class="lineHeight" type=\'number\'>分机号码
      <input class=\'input-7\' placeholder=\'公司分机号码（选填）\'></input>
  </view>
  <view class="lineHeight" type="text">
      <!-- <input class=\'input-7\'></input> -->
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"  bindtap=\'clearFont\'>
            产品/服务
            <text class=\'select\' >{{placeholder}} {{array[index]}}</text>
    </picker>
  </view>
  <view class="lineHeight" type="text">
      <!-- <input class=\'input-7\' placeholder=\'请选择\'></input> -->
      <view class="section">
        <!-- <view class="section__title">省市区选择器</view> -->
          <picker
             mode="region"
             bindchange="bindRegionChange"
             value="{{region}}"
             custom-item="{{customItem}}"
          >
            <view class="picker">
              公司地址 <text class=\'select\'>{{region[0]}}，{{region[1]}}，{{region[2]}}</text>
            </view>
         </picker>
  </view>
  </view>
  <view class="lineHeight" type="text">具体地址
      <input class=\'input-7\' placeholder=\'具体地址\'></  input>
  </view>
</view>
 
 
<view class="weui-uploader">
  <view class="img-v weui-uploader__bd">
    <view class=\'pic\' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
        <image class=\'weui-uploader__img \'
                src="{{item}}"
                data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
                  <icon type=\'cancel\' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
        </image>
    </view>
     
      <!-- 用来提示用户上传图片 -->
      <view class="weui-uploader__input-box pic" bindtap="chooseImg"> </view>
  </view>
  <button class="upload-img-btn" bindtap="chooseImg" type=\'primary\'>拍照  / 上传</button>
</view>

　　

css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/* pages/upload/upload.wxss */
.img{
  display: inline-block;
}
 
.pic {
float:left;
position:relative;
margin-right:9px;
margin-bottom:9px;
}
 
.delete-btn{
  position: absolute;
  top: 0;
  right: 0;
}
 
.weui-uploader{
  padding: 10rpx;
}
 
 
.lineHeight {
  width: 100%;
  line-height: 80rpx;
  border-bottom: 1px solid #ccc;
  font-size: 30rpx;
}
.container {
  padding: 0;
  align-items: left;
  padding-left: 15rpx;
}
.numberInfo {
  font-size: 24rpx;
  text-indent: 15rpx;
  border-bottom: 1px solid #ccc;
}
 
/* .input {
  display: inline-block;
  border: 1px solid #ccc;
  line-height: 80rpx;
  vertical-align: middle;
  margin-left: 11%;
  width: 75%;
} */
.input,
.input-7 ,
.input-15{
  margin-left: 7%;
  display: inline-block;
  /* border: 1px solid #ccc; */
  line-height: 80rpx;
  vertical-align: middle;
  width: 75%;
}
.input{
  margin-left: 11%;
}
 
button {
  width: 100%;
  margin-top: 30rpx;
}
.select{
  margin-left: 7%;
  color: #666;
}
 
.input-15{
  margin-left:15%;
}

　　

js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
// pages/upload/upload.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    imgs: [],
    placeholder: \'请选择\',
    array: [\'发电机\', \'充电器\', \'引擎动力\', \'其他\'],
    objectArray: [
      {
        id: 0,
        name: \'发电机\'
      },
      {
        id: 1,
        name: \'充电器\'
      },
      {
        id: 2,
        name: \'引擎动力\'
      },
      {
        id: 3,
        name: \'其他\'
      }
    ],
 
    multiIndex: [0, 0, 0],
    date: \'2016-09-01\',
    time: \'12:01\',
    region: [\'广东省\', \'广州市\', \'海珠区\'],
    customItem: \'全部\'
  },
  // 上传图片
  chooseImg: function (e) {
    var that = this;
    var imgs = this.data.imgs;
    if (imgs.length >= 9) {
      this.setData({
        lenMore: 1
      });
      setTimeout(function () {
        that.setData({
          lenMore: 0
        });
      }, 2500);
      return false;
    }
    wx.chooseImage({
      // count: 1, // 默认9
      sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        var imgs = that.data.imgs;
        // console.log(tempFilePaths + \'----\');
        for (var i = 0; i < tempFilePaths.length; i++) {
          if (imgs.length >= 9) {
            that.setData({
              imgs: imgs
            });
            return false;
          } else {
            imgs.push(tempFilePaths[i]);
          }
        }
        // console.log(imgs);
        that.setData({
          imgs: imgs
        });
      }
    });
  },
  // 删除图片
  deleteImg: function (e) {
    var imgs = this.data.imgs;
    var index = e.currentTarget.dataset.index;
    imgs.splice(index, 1);
    this.setData({
      imgs: imgs
    });
  },
  // 预览图片
  previewImg: function (e) {
    //获取当前图片的下标
    var index = e.currentTarget.dataset.index;
    //所有图片
    var imgs = this.data.imgs;
    wx.previewImage({
      //当前显示图片
      current: imgs[index],
      //所有图片
      urls: imgs
    })
  },
 
 
 
  bindPickerChange(e) {
    console.log(\'picker发送选择改变，携带值为\', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  clearFont() {
    this.setData({
      placeholder: \'\'
    })
  },
 
  bindRegionChange(e) {
    console.log(\'picker发送选择改变，携带值为\', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }
})

https://www.cnblogs.com/m1754171640/p/10525826.html

以上是关于微信小程序实现图片是上传预览功能的主要内容，如果未能解决你的问题，请参考以下文章

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

微信小程序如何给服务器上传多张图片,微信小程序实现上传多张本地图片到服务器和图片预览...

微信小程序实现单/多图片上传（预览删除）

微信小程序实现单/多图片上传（预览删除）

微信小程序的实现图片预览功能

小程序图片上传，预览，删除功能