前言

手机上传图片的功能大家一定都用过吧，今天教你用微信小程序实现这个小功能。

实现效果如下：

实现思路：

首先我们需要定义一个存放图片的数组，通过方法拿取图片的详细信息，然后调用微信小程序的 wx.uploadFile 方法将拿到的图片信息添加到定义好的图片数组中即可；删除图片我们只需要拿到存放图片的数组再通过 splice 方法删除。

wx.uploadFile(Object object) 方法的参数：

属性类型必填项说明
urlstring是开发者服务器地址
filePathstring是要上传文件资源的路径 (本地路径)
namestring是文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
headerObject否HTTP 请求 Header，Header 中不能设置 Referer
formDataObject否HTTP 请求中其他额外的 form data
timeoutfunction否超时时间，单位为毫秒
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

源码文件

wxml文件

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

js文件

//获取应用实例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            },        });    },})

wxss文件

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

至此，这个小功能就实现啦！