上次写了篇上传图片的文章：小程序上传图片及预览图片 ，还缺少一点功能，今天做了另一种删除删除样式，加上上传图片到服务器功能；
wxml
1. <!-- 图片上传模块 -->
2. <view class='upImage' wx:if="{{isImage}}">
3. <view class='upImage-list'>
4. <view class='image-li' bindtap='chooseImage'>
5. <view class='iconfont icon-xiangji'></view>
6. </view>
7. <view class='image-li' wx:for="{{imgs}}" wx:key="imgs">
8. <image bindtap='previewImage' data-index='{{index}}' mode='aspectFill' src='{{item}}'></image>
9. <text bindtap='delImage' data-index='{{index}}'>删除</text>
10. </view>
11. </view>
12. <button bindtap='uploadImage'>上传图片</button>
13. </view>
wxss
1. /* 上传图片 */
2.
3. .upImage {
4. padding: 10px;
5. margin-top: 10px;
6. }
7.
8. .upImage-list {
9. display: flex;
10. flex-wrap: wrap;
11. }
12.
13. .image-li {
14. margin-right: 10px;
15. margin-bottom: 10px;
16. width: calc((100vw - 50px) / 4);
17. height: calc((100vw - 50px) / 4);
18. border: 1px solid #fff;
19. border-radius: 10px;
20. overflow: hidden;
21. position: relative;
22. }
23.
24. .image-li:first-child {
25. display: flex;
26. align-items: center;
27. justify-content: center;
28. color: #eee;
29. }
30.
31. .image-li:first-child view {
32. font-size: 100rpx;
33. }
34.
35. .image-li:nth-child(4n) {
36. margin-right: 0;
37. }
38.
39. .image-li image {
40. width: 100%;
41. height: 100%;
42. }
43.
44. .image-li text {
45. position: absolute;
46. text-align: center;
47. bottombottom: 0;
48. left: 0;
49. width: 100%;
50. font-size: 24rpx;
51. background: rgba(0, 0, 0, 0.5);
52. color: #fff;
53. }
54. .upImage button{
55. background: rgba(0, 0, 0, 0);
56. color: #fff;
57. border: 1px solid #fff;
58. }
JS
1. data:{
2. imgs: [] , // 图片临时储存
3. },
4. /**
5. * 选择图片点击
6. */
7. chooseImage:function(){
8. let that = this;
9. wx.chooseImage({
10. // count: 1, // 默认9
11. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
12. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
13. success: function (res) {
14. // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
15. var tempFilePaths = res.tempFilePaths
16. let imgs = that.data.imgs;
17. for(let i =0; i < tempFilePaths.length; i++){
18. imgs.push(tempFilePaths[i])
19. }
20. that.setData({
21. imgs: imgs
22. })
23. }
24. })
25. },
26. /**
27. * 预览图片
28. */
29. previewImage:function(e){
30. let _index = e.currentTarget.dataset.index;
31. let list = this.data.imgs;
32. let current = list[_index];
33. wx.previewImage({
34. current: current, // 当前显示图片的http链接
35. urls: list // 需要预览的图片http链接列表
36. })
37. },
38. /**
39. * 删除图片
40. */
41. delImage:function(e){
42. let _index = e.currentTarget.dataset.index;
43. let previewImage = this.data.imgs;
44. console.log(previewImage)
45. previewImage.splice(_index, 1);
46. this.setData({
47. imgs: previewImage
48. })
49. },
50. /**
51. * 上传图片
52. */
53. uploadImage:function(e){
54. let imgs = this.data.imgs;
55. for (let i = 0; i < imgs.length; i++){
56. wx.uploadFile({
57. url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
58. filePath: imgs[i],
59. name: 'file',
60. formData: {
61. 'user': 'test'
62. },
63. success: function (res) {
64. var data = res.data
65. //do something
66. }
67. })
68. }
69. },