1. 简介
微信小程序具有体积小、易开发、能力强等优点，在社交、金融、商业等多个领域得到广泛应用。在这些场景中，用户往往需要上传图片，这就要求开发者掌握上传图片的相关技能。
2. 图片上传流程
图片上传的一般流程如下：
2.1. 选择图片
用户点击页面上的上传按钮，会调用API选择一张或多张图片，将选择的图片放入一个数组中。
wx.chooseImage({
count: 1, // 可选择的图片数量，默认9
sizeType: ['original', 'compressed'], // 可选择的原图或压缩后的图片，默认二者都有
sourceType: ['album', 'camera'], // 可选择的图片来源，相册或拍照，默认二者都有
success: res => {
// 将选择的图片存放在一个数组中
const images = res.tempFilePaths;
}
})
2.2. 上传图片
选择图片后，开发者需要将图片上传至服务器。在上传过程中，需要处理以下几个问题：
1. 图片格式：开发者需要确定上传图片的格式，通常来说，jpg和png是最常用的格式，可以直接从文件名的后缀中读取出来。
2. 上传地址：开发者需要确定上传图片的地址，这个地址应该由服务器端提供。
3. 上传方式：有多种上传方式可供选择，例如基于HTTP协议的POST请求、WebSocket协议等。
4. 上传参数：开发者通常还需要将一些参数一同上传，例如用户的身份信息等。
上传图片的代码示例：
wx.uploadFile({
url: 'http://example.com/upload',
filePath: images[0],
name: 'file',
formData:{
'user': 'test'
},
success: res => {
const data = res.data
// do something
}
})
3. 图片上传的注意事项
在使用小程序上传图片时，有以下几点需要注意。
3.1. 文件大小和数量限制
在选择图片时，需要注意文件大小和数量的限制。
文件大小：微信小程序对上传文件的大小做了限制，单个文件大小不能超过10M。如果开发者想上传大于10M的文件，可以将文件分片上传。
文件数量：微信小程序对上传文件的数量也做了限制，单次上传的文件数量不能超过9个。如果需要上传更多的文件，可以使用分批上传的方式。
3.2. 图片的压缩
在上传图片时，为了防止图片过大导致上传时间过长，可以对图片进行压缩。微信小程序提供了一个压缩图片的API，可以将图片压缩至指定大小。
wx.compressImage({
src: images[0],
quality: 80,
success: res => {
const compressedImage = res.tempFilePath;
},
fail: err => {
console.error(err);
}
})
3.3. 图片的格式转换
有时候，服务器要求上传图片的格式与选择的图片格式不一致，这时需要将图片格式进行转换。转换的方法有很多，例如在前端使用canvas将图片转换为指定格式。
下面是一个将图片转换为base64格式的代码示例：
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL('image/png');
}
img.src = '/path/to/image.png';
4. 总结
通过本文的介绍，我们可以初步了解小程序上传图片的基本流程和注意事项。开发者需要根据服务器的要求和具体的场景，合理地选择图片格式、上传方式和参数等，以充分发挥小程序的上传图片功能。