微信小程序实现图片上传功能的思路与源码

<view class="imgBox">
    <view><text>车辆照片</text></view>
    <view class="imgContant">
        <van-uploader accept="image" max-count="1" bind:after-read="afterRead" bind:delete="deleteClick" file-list="{{ fileList }}" />
    </view>
</view>

//获取应用实例
var app = getApp();
Page({
    data: {
        fileList: [], //图片存放的数组
    },
    // 删除照片
    deleteClick(event) {
        var imgData = this.data.fileList;
        // 通过splice方法删除图片
        imgData.splice(event.detail.index, 1);
        // 更新图片数组
        this.setData({
            fileList: imgData
        })
    },
    // 车辆照片
    afterRead(event) {
        // loading加载
        wx.showLoading({
            title: '上传中...'
        });
        const {file} = event.detail;//获取图片详细信息
        let that = this;//防止this指向问题
        // 设置请求头，根据项目需求变换
        let Authorization = wx.getStorageSync('key')
        let headers = {
            'content-type': '',
            'client_id': 'webApp',
            'client_secret': '123456',
        }
        if (Authorization) {
            headers.Authorization = 'Bearer ' + Authorization
        }
        // 调用wx.uploadFile上传图片方法
        wx.uploadFile({
            url: "http://192.168.0.11:8888/api-xian/api-zjmj/zjmj/hmcl/uploadFile",
            method: 'POST',
            header: headers,
            filePath: file.url,
            name: 'file',
            formData: {
                user: 'test'
            },
            // 成功回调
            success(res) {
                // JSON.parse()方法是将JSON格式字符串转换为js对象
                var result = JSON.parse(res.data);
                // 上传完成需要更新 fileList
                const {fileList = []} = that.data;
                // 将图片信息添加到fileList数字中
                fileList.push({
                    ...file,
                    url: result.data
                });
                // 更新存放图片的数组
                that.setData({
                    fileList
                });
                wx.hideLoading();//停止loading
            },
        });
    },
})

page {
    background: #EFF4FF;
}

.imgBox {
    font-size: 28rpx;
    margin: 3%;
    background: white;
    padding: 30rpx;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
}

.imgContant {
    margin-left: 40rpx;
}