微信小程序中选中手机相册图片上传到服务器的方法

思路: 实现图片上传我们需要使用chooseImguploadFile 这两个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文件:

go 复制代码
<button bindtap="choose_UpImage">选择图片进行上传</button>

1. js文件:

go 复制代码
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('上传失败')
	          }
	        })
	      }
	    })
  },


})
相关推荐
SPC的存折6 小时前
1、Redis数据库基础
linux·运维·服务器·数据库·redis·缓存
爱学习的小囧6 小时前
VMware ESXi 6.7U3v 新版特性、驱动集成教程和资源包、部署教程及高频问答详情
运维·服务器·虚拟化·esxi6.7·esxi蟹卡驱动
小疙瘩7 小时前
只是记录自己发布若依分离系统到linux过程中遇到的问题
linux·运维·服务器
dldw7777 小时前
IE无法正常登录windows2000server的FTP服务器
运维·服务器·网络
我是伪码农8 小时前
外卖餐具智能推荐
linux·服务器·前端
汤愈韬8 小时前
下一代防火墙通用原理
运维·服务器·网络·security
IMPYLH9 小时前
Linux 的 od 命令
linux·运维·服务器·bash
数据雕塑家10 小时前
Linux下大文件切割与合并实战:解决FAT32文件系统传输限制
linux·运维·服务器
IMPYLH11 小时前
Linux 的 nice 命令
linux·运维·服务器·bash
yleihj12 小时前
vCenter计算机SSL证书续期
服务器·网络协议·ssl