微信小程序实现图片上传到服务器
实现图片上传我们需要使用chooseImg和uploadFile这两个api。
微信小程序中的chooseImg是一个API,用于在用户相册或相机中选择图片上传。它可以让用户在小程序中选择上传图片,以便进行下一步操作,例如将其发送给朋友或将其上传到服务器。
使用chooseImg API,您可以通过以下步骤实现在小程序中选择图片上传:
1.在wxml文件中添加一个按钮或其他可触摸元素,以触发选择图片的操作。
2.在js文件中使用wx.chooseImage(options)函数来触发选择图片的操作。
3.在options参数中,可以设置maximum选项以限制用户选择的图片数量,可以设置sizeType选项以限制图片的大小,可以设置sourceType选项以限制图片源(相册或相机)。
4.选择完成后,可以使用wx.uploadFile(options)函数将图片上传到服务器。
下面是一个使用chooseImg API的示例代码:
wxml文件:
js文件:
Page({
chooseImage: function () {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'https://example.com/upload',
filePath: tempFilePaths[0],
name: 'image',
formData: {
'user': 'test'
},
success: function (res) {
var data = res.data
// do something
},
fail: function (res) {
console.log('上传失败')
}
})
}
})
}
})
此代码包括选择图片和上传图片两个步骤,并将选择的图像上传到您的服务器。解析如下
1.调用wxchooselmage方法,该方法用于在微信小程序中选择图片 2.wx.chooselmage方法的count参数设置为1,表示选择一张图片 3.sizeType参数设置为[original,compressed],表示选择原图和压缩图两种尺寸的图片。 4.sourceType参数设置为[album,camera],表示选择相册和相机两种来源的图片。 5.success回调函数,当图片选择成功时执行 6.通过res.tempFilePaths获取到选中图片的临时文件路径 7.调用wx.uploadFile方法,将选中图片的临时文件路径作为参数传递给该方法 8.wxuploadFile方法用于在微信小程序中上传文件 9 url参数设置为'https://example.com/upload,表示要上传到的URL地地上 filePath参数设置为tempFilePaths[0],表示要上传的文件路径,使0用的是选中图片的临时文件路径。 10.name参数设置为'image”,表示在服务器接收到的文件的name参数的值为image 表示在服务器接收到的文件的formData参数设置为fuser:test},formData参数的值为fuser:test。11.success回调函数,当文件上传成功时执行 12.通过res.data获取到服务器返回的数据8.fail回调函数,当文件上传失败时执行。 输出上传失败。
后端我采用的是php代码