手机上传图片的功能大家一定都用过吧，今天教你用微信小程序实现这个小功能。
实现效果如下：
首先我们需要定义一个存放图片的数组，通过方法拿取图片的详细信息，然后调用微信小程序的 wx.uploadFile 方法将拿到的图片信息添加到定义好的图片数组中即可；删除图片我们只需要拿到存放图片的数组再通过splice方法删除。
wx.uploadFile(Object object)方法的参数：
| 属性 | 类型 | 必填项 | 说明 |
|---|---|---|---|
| url | string | 是 | 开发者服务器地址 |
| filePath | string | 是 | 要上传文件资源的路径 (本地路径) |
| name | string | 是 | 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容 |
| header | Object | 否 | HTTP 请求 Header，Header 中不能设置 Referer |
| formData | Object | 否 | HTTP 请求中其他额外的 form data |
| timeout | function | 否 | 超时时间，单位为毫秒 |
| success | function | 否 | 接口调用成功的回调函数 |
| fail | function | 否 | 接口调用失败的回调函数 |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
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;
}
至此，这个小功能就实现啦！
