微信小程序实现图片上传功能的思路与源码
作者：水星记_
我们日常开发中经常需要用到图片上传功能,这篇文章主要给大家介绍了关于微信小程序实现图片上传功能的思路与源码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
手机上传图片的功能大家一定都用过吧，今天教你用微信小程序实现这个小功能。
实现效果如下：
实现思路：
首先我们需要定义一个存放图片的数组，通过方法拿取图片的详细信息，然后调用微信小程序的 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;
}
至此，这个小功能就实现啦！
总结
到此这篇关于微信小程序实现图片上传功能的文章就介绍到这了,更多相关微信小程序图片上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！