图片上传主要用到
1、wx.chooseImage(Object object)
从本地相册选择图片或使用相机拍照。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| count | number | 9 | 否 | 最多可以选择的图片张数 |
| sizeType | Array.<string> | ['original', 'compressed'] | 否 | 所选的图片的尺寸 |
| sourceType | Array.<string> | ['album', 'camera'] | 否 | 选择图片的来源 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.sizeType 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| original | 原图 | |
| compressed | 压缩图 |
object.sourceType 的合法值
| 值 | 说明 | 最低版本 |
|---|---|---|
| album | 从相册选图 | |
| camera | 使用相机 |
object.success 回调函数
参数
Object res
| 属性 | 类型 | 说明 | 最低版本 |
|---|---|---|---|
| tempFilePaths | Array.<string> | 图片的本地临时文件路径列表 | |
| tempFiles | Array.<Object> | 图片的本地临时文件列表 | 1.2.0 |
res.tempFiles 的结构
| 属性 | 类型 | 说明 |
|---|---|---|
| path | string | 本地临时文件路径 |
| size | number | 本地临时文件大小，单位 B |
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
}
})
2、wx.uploadFile(Object object)
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| url | string | 是 | 开发者服务器地址 | |
| filePath | string | 是 | 要上传文件资源的路径 | |
| name | string | 是 | 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容 | |
| header | Object | 否 | HTTP 请求 Header，Header 中不能设置 Referer | |
| formData | Object | 否 | HTTP 请求中其他额外的 form data | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
object.success 回调函数
参数
Object res
| 属性 | 类型 | 说明 |
|---|---|---|
| data | string | 开发者服务器返回的数据 |
| statusCode | number | 开发者服务器返回的 HTTP 状态码 |
返回值
UploadTask
基础库 1.4.0 开始支持，低版本需做兼容处理。
一个可以监听上传进度进度变化的事件和取消上传的对象
示例代码
wx.chooseImage({
success (res) {
const tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success (res){
const data = res.data
//do something
}
})
}
})
小程序案例：
.wxml 文件：
<view> <button bindtap='photo' type='warn' style='width:50%; margin:50rpx auto'>选择图片</button> </view>
.js 文件
（1）单图上传
photo: function (e) {
wx.chooseImage({
count: 1, //默认上传个数
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
var albumPaths = res.tempFilePaths[0]
console.log('图片地址名称' + albumPaths);
wx.uploadFile({
url: app.appUrl + 'img',
filePath: albumPaths,
name: 'img',
formData: {
'nickName': '123',//其他参数
'openid': 'xxssdazcs5gxxxaa',//其他参数
},
success(res) {
console.log(res)
}
})
}
})
},
（2）多图上传（相比单图上传，多了个for遍历）
photo: function (e) {
wx.chooseImage({
count: 3,//默认上传个数
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
var albumPaths = res.tempFilePaths
for (var i = 0; i < albumPaths.length; i++) {
console.log('图片地址名称' + albumPaths[i]);
wx.uploadFile({
url: app.appUrl + 'img',
filePath: albumPaths[i],
name: 'img',
formData: {
'nickName': '123',//其他参数
'openid': 'xxssdazcs5gxxxaa',//其他参数
},
success(res) {
console.log(res)
}
})
}
}
})
},
后端代码：文章来源：https://www.toymoban.com/news/detail-777949.html
public function img(){
$file = request()->file('img');
$info = $file->move(ROOT_PATH . 'public' . DS . 'static/uploads/ceshi');
}
文章来源地址https://www.toymoban.com/news/detail-777949.html
到了这里，关于微信小程序单图上传和多图上传的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
