前言
手机上传图片的功能大家一定都用过吧，今天教你用微信小程序实现这个小功能。
实现效果如下：
实现思路：
首先我们需要定义一个存放图片的数组，通过方法拿取图片的详细信息，然后调用微信小程序的wx.uploadFile方法将拿到的图片信息添加到定义好的图片数组中即可；删除图片我们只需要拿到存放图片的数组再通过splice方法删除。
wx.uploadFile(Object object)方法的参数：
源码文件
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);// 上传完成需要更新 fileListconst {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;}
至此，这个小功能就实现啦！
