阅读量:0
思路: 实现图片上传我们需要使用chooseImg和uploadFile这两个api。
1. 微信小程序中的chooseImg是一个API,用于在用户相册或相机中选择图片上传。它可以让用户在小程序中选择上传图片,以便进行下一步操作,例如将其发送给朋友或将其上传到服务器。
2. 使用chooseImg API,您可以通过以下步骤实现在小程序中选择图片上传:
步骤:
1. 在wxml文件中添加一个按钮或其他可触摸元素,以触发选择图片的操作。
2. 在js文件中使用wx.chooseImage(options)函数来触发选择图片的操作。
3. 在options参数中,可以设置maximum选项以限制用户选择的图片数量,可以设置sizeType选项以限制图片的大小,可以设置sourceType选项以限制图片源(相册或相机)。
4. 选择完成后,可以使用wx.uploadFile(options)函数将图片上传到服务器。
代码:
1. wxml文件:
<button bindtap="choose_UpImage">选择图片进行上传</button>
1. js文件:
Page({ choose_UpImage: function () { wx.chooseImage({ count: 1, //count参数设置为1,表示选择一张图片 sizeType: ['original', 'compressed'],//表示选择原图和压缩图两种尺寸的图片。 sourceType: ['album', 'camera'],//album表示选择相册来源的图片、camera表示相机来源的图片 success: function (res) { //通过res.tempFilePaths获取到选中图片的临时文件路径 var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'https://网址.com/wave/upload/headImg', //filePath参数设置为tempFilePaths[0],表示要上传的文件路径,使0用的是选中图片的临时文件路径。 filePath: tempFilePaths[0], //name参数设置为'file”,表示在服务器接收到的文件的name参数的值为file name: 'file', //表示在服务器接收到的文件的formData参数设置为user:test,formData参数的值为user:test formData: { 'user': 'test' }, success: function (res) { var fanhui_data = res.data // {"data":{"src":"statics/uploadfiles/1712036877769.jpg"},"code":0,"msg":""} console.log('上传成功,返回的整体数据========'+fanhui_data) //接受的数据 需要转化为json数据 let JsonSrc = JSON.parse(fanhui_data) console.log("返回的整体数据进行json转换:",JsonSrc) console.log("上传成功,返回图片的路径========"+JsonSrc.data.src) }, fail: function (res) { console.log('上传失败') } }) } }) }, })