微信小程序实现图片上传
2023-03-31 10:43:19 时间
前言
手机上传图片的功能大家一定都用过吧,今天教你用微信小程序实现这个小功能。
实现效果如下:
实现思路:
首先我们需要定义一个存放图片的数组,通过方法拿取图片的详细信息,然后调用微信小程序的 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;
}
至此,这个小功能就实现啦!
相关文章
- Flask中的请求上下文和应用上下文
- 腾讯入资东方金信数亿元,共建大数据生态体系
- 浅谈大数据开发工程师的两年工作经验总结
- 大数据应用案例:Dealer Tire通过大数据预测消费者何时需要轮胎
- 医疗大数据:如何实现商业化变现?
- 大数据分析建模及其应用建议
- 招聘行业大数据应用场景分析
- 大数据入门学习必读好书推荐,请收藏!
- 区块链与大数据的整合,未来必然趋势
- 如今的大数据究竟发展到了什么阶段
- InterSystems IRIS医疗版助力东华医为推动中国医疗行业数字化转型
- 大数据产业进入提质增效关键期
- 社交网络大数据的应用有多大的价值
- 大数据安全防护方法研究与建议
- InterSystems IRIS 数据平台通过AWS云应用商店认证
- 大数据在医疗行业中的5种应用
- 中国大地保险数据管理应用中心大数据应用平台案例分析
- 大数据在应急管理中的应用
- 大数据:产业链条将更为完备
- 2019年大数据发展将走向何方