小程序上传图片的功能带接口_小程序调上传图片接口

上传图片

PS 上传图片的接口里面的参数并不是真正的参数(长话短说,这个是数组)

在登录的时候一般一般要拿到token
token的话要在请求头上展示，然后每次在登录时 拿到这个token才可以请求访问。

上传预览删除效果

这个不带请求参数，只是单独实现以上效果的功能

效果图

代码

wxml

<view class="content">
                        <view class='ui_uploader_cell'>
                                <view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="{{index}}">
                                        <icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}"
                                                type="clear" size="20" color="gray" />
                                        <image class="ui_image" bindtap='showImg' data-index="{{index}}" src='{{item}}'>
                                             
                                        </image>
                                </view>
                                <view class='onload' bindtap='upload' wx:if="{{showUpload}}"></view>
                        </view> <!-- 上传图片 -->
                </view>
1
2
3
4
5
6
7
8
9
10
11
12

wxss

.content{
        padding: 0 20px;
        width: 90%;
        line-height: 50px;
        height: 50px;
        display: flex;
        margin-bottom: 10px;
        background: fixed;
        background: white;
        justify-content: space-between;    
}
.content-img{
   width: 30px;
   height: 30px;
   margin-top: 6px;
   vertical-align: middle;     
}
.content--text{
        color: gray;
        vertical-align: middle;
}
.onload {
        margin-top: 10px;
        float: left;
        position: relative;
        margin-right: 25px;
        margin-bottom: 25px;
        width: 60px;
        border-radius: 50%;
        height: 60px;
        border: 1px dashed #96DC74;
        box-sizing: border-box;
}

.onload::before {
        content: " ";
        position: absolute;
        width: 2px;
        height: 35px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #96DC74;
}

.onload::after {
        content: " ";
        position: absolute;
        height: 2px;
        width: 35px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: #96DC74;
}

.ui_image {
        margin-top: 10px;
        float: left;
        position: relative;
        margin-right: 25px;
        margin-bottom: 25px;
        width: 60px;
        border-radius: 50%;
        height: 60px;
        box-sizing: border-box;
}

.ui_uploader_item_icon {
        position: absolute;
        right: 21px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
}

.ui_uploader_item {
        float: left;
        position: relative;
        margin-right: 30rpx;
        margin-bottom: 30rpx;
        width: 165rpx;
        height: 165rpx;
}

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

js

Page({
        data: {
                // 上传图片数据
                uploaderList: [],
                uploaderNum: 0,
                showUpload: true,
        },
        // 删除图片
        clearImg: function (e) {
                var nowList = []; //新数据
                var uploaderList = this.data.uploaderList; //原数据
                for (let i = 0; i < uploaderList.length; i++) {
                        if (i == e.currentTarget.dataset.index) {
                                continue;
                        } else {
                                nowList.push(uploaderList[i])
                        }
                }
                this.setData({
                        uploaderNum: this.data.uploaderNum - 1,
                        uploaderList: nowList,
                        showUpload: true
                })
        },
        //展示图片
        showImg: function (e) {
                var that = this;
                wx.previewImage({
                        urls: that.data.uploaderList,
                        current: that.data.uploaderList[e.currentTarget.dataset.index]
                })
        },
        //上传图片
        upload: function (e) {
                var that = this;
                wx.chooseImage({
                //默认为1的直接把num值变就可以了
                        count: 9 - that.data.uploaderNum, // 默认9
                        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                        success: function (res) {
                                console.log(res)
                                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                                let tempFilePaths = res.tempFilePaths;
                                let uploaderList = that.data.uploaderList.concat(tempFilePaths);
                                if (uploaderList.length == 9) {
                                        that.setData({
                                                showUpload: false
                                        })
                                }
                                that.setData({
                                        uploaderList: uploaderList,
                                        uploaderNum: uploaderList.length,
                                })
                        }
                })
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {

        },

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {

        },

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {

        },

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {

        },

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {

        },

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {

        },

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {

        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {

        }
})
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

带后台接口效果

就是请求时上传的图片会传到数据库与接口显示
参考链接

同上所述，就是在上传的时候更改下代码

  //上传图片
    upload: function (e) {
        var that = this;
        wx.chooseImage({
            count: 9 - that.data.uploaderNum, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function ({tempFilePaths: [ filePath ]}) {
                wx.uploadFile({//填上这个是上传服务器需要
                    url: 'http://192.168.101.16:8028/sy/file/addPic',
                    filePath,
                    name: 'file',//这个是接口属性 是个数组 不是嵌套累加的
                    header: {
                        'Authorization':'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxNTU2NTk3MTQ2NSIsImNyZWF0ZWQiOjE2MTc5NTMxNDgxNjksImV4cCI6MTYxODU1Nzk0OH0.6FQT5vMiWtFf0jLo4Wmk55GVJVLFrnBN7SP6CkElE71Tn7oRLcphpbjGaEzVaRyfxqsI5W9T67l7J0CYYSJ9_Q'
                    },
                    success: function (res) {
                        var data = res.data
                        //do something
                    }
                })
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                let uploaderList = that.data.uploaderList.concat(filePath);
                if (uploaderList.length == 1) { //这个是只能上次一张图片 
                    that.setData({
                        showUpload: false
                    })
                }
                that.setData({
                    uploaderList: uploaderList,
                    uploaderNum: uploaderList.length,
                })
            }
        })
    },
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

上传完请求图片后，在另一个页面接收并渲染上去

AB页面互相传参接参 请访问
然后我们传完后，我们进行渲染

//然后我们进行渲染
//前面是服务器名称 后面是你定义的名称值 以'http://8000/'+图片路径
<image src="{{'http://192.168.101.16:8028/sy/file/addPic/'+addimg}}"></image>
1
2
3

如果返回的直接是带服务器的接口，可以直接渲染，不用拼接。
不带服务器的才要考虑上面那个拼接方式