微信小程序相片上传全攻略，基础到高级方法解析
微信小程序上传相片的功能可以分为基础版和高级版。基础版的上传相片主要利用微信小程序的组件实现，用户点击后选择手机相册中的图片，然后小程序可以通过wx.chooseImage接口获取到图片的本地临时文件路径，再通过wx.uploadFile接口上传到服务器。，，高级版的上传相片功能则需要更复杂的逻辑，比如实现图片的裁剪、压缩、上传进度显示等。可以通过第三方库如uni-app-canvas-draw来实现图片的裁剪；可以通过canvas或者image对象实现图片的压缩；利用wx.uploadFile接口将图片上传到服务器，同时利用wx.showLoading和wx.hideLoading接口显示和隐藏上传进度。这些功能大大提升了用户体验，使得小程序能够处理更复杂的图片上传需求。
随着移动互联网的普及，微信已经成为了我们生活的一部分，微信小程序也因此应运而生，凭借其无需下载安装、即用即走的特点，赢得了众多用户的喜爱，在微信小程序中，上传相片是一个常见的功能需求，本文将从基础到高级，为大家详细介绍微信小程序中上传相片的方法。
基础篇：使用wx.chooseImage选择图片
在微信小程序中，使用wx.chooseImage API可以让用户选择照片库或者相机拍摄的相片，以下是使用wx.chooseImage的基础示例代码：
wx.chooseImage({
count: 1, // 默认为9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
}
})在实际开发中，我们需要将选取的照片上传到服务器，上传照片通常有两种方式：一是使用小程序的wx.uploadFile上传文件；二是使用HTTPS将图片上传到自己的服务器，由于wx.uploadFile需要将图片转化为base64格式，文件大小不能过大，否则可能会上传失败，通常推荐使用HTTPS将图片上传到自己的服务器。
高级篇：使用云开发Cloud函数上传图片
微信云开发为开发者提供了完整的云端支持，无需搭建服务器，在云开发控制台可以完成环境管理、数据库管理、文件存储、云函数、云调用等操作，使用云开发上传图片，可以大大简化开发流程，提高开发效率。
以下是使用云开发Cloud函数上传图片的基础示例代码：
const cloud = require('wx-server-sdk')
cloud.init({
env: 'your-env-id' // 环境id
})
exports.main = async (event, context) => {
try {
const result = await cloud.uploadFile({
cloudPath: 'your-path-id/filename.jpg', // 文件存储的路径
filePath: event.filePath, // 本地文件路径
})
return result
} catch (err) {
console.error(err)
throw err
}
}在前端调用云函数上传图片，可以使用wx.cloud.init初始化云开发环境，然后调用wx.cloud.callFunction来调用云函数。
wx.cloud.init({
env: 'your-env-id' // 环境id
})
wx.chooseImage({
count: 1,
success: function(res) {
const tempFilePaths = res.tempFilePaths
wx.cloud.init({
env: 'your-env-id' // 环境id
})
wx.cloud.callFunction({
name: 'upload', // 你的上传图片的云函数的名字
data: {
filePath: tempFilePaths[0] // 选择的文件路径
},
success: function(res) {
console.log(res.result)
// 可以根据返回的result在小程序展示
},
fail: function(error) {
console.log(error)
}
})
}
})使用云开发上传图片，可以大大简化开发流程，提高开发效率，云开发还提供了丰富的API，如数据库操作、云存储、云调用等，可以满足各种业务需求。
在微信小程序中，上传相片是一个常见的功能需求，基础的方式是使用wx.chooseImage选择图片，然后使用HTTPS将图片上传到自己的服务器，高级的方式是使用微信云开发Cloud函数上传图片，无需搭建服务器，可以在云开发控制台完成环境管理、数据库管理、文件存储、云函数、云调用等操作，大大简化了开发流程，提高了开发效率，无论哪种方式，都需要考虑到图片的格式、大小、上传速度等因素，以确保上传相片的功能能够稳定、高效地运行。
与本文内容相关的文章：
