uniapp的app兼容微信小程序上传图片

我这个需求是原来是app项目想要兼容小程序的需求。这里讲一下需要注意的点。

一、需要注意的点

1.app和小程序的区别：app支持多张图片一次性使用files字段上传多张图片。但是小程序只支持一次发送一张图片，这里我们需要使用uniapp的语法分别写app和小程序的上传方法。小程序的上传是ide会自动把获取到的本地文件数据在传输时转换成对应的进制文件传递给后端的。我们开发者是拿不到小程序内部文件储存的信息的。这里还有一些关于微信小程序本地储存的资料，放到下面。建议看一下

文件系统 | 微信开放文档

2.后台对接方面：这里有一点需要注意，就是你们后端需要接收的数据的要求。

第一种：是后端之前只写了一次接收多个照片流，这里后端也需要改。而且是直接发送图片，不是发送图片地址。

第二种：前端传的图片地址是后台返回来，然后调用接口一次性传递过去的。其实这种最容易了，直接传一个formData就一起传过去了，因为传的不是文件不是二进制数据。也不用改。

二、如果后台不能改上传图片同时返回图片地址的方法的话，前端的相关代码

//上传方法
            async uploadPhoto() {
			    let imgs
				let that = this
				imgs = this.photolist_temp.map((value, index) => {
					return {
						name: 'image' + index,
						uri: value
					}
				})
                //app方法，这里是封装好的$http请求
				//#ifdef APP-PLUS
				this.$http.upload(this.$config.apiUrl + this.initUrl, {
					files: imgs
				}).then(resp => {
					that.getUserInfo()
				}).catch((err) => {
					that.$tip.loaded()
					that.$tip.toast(err.message)
				})
				//#endif
                //小程序的上传方法
				//#ifdef MP-WEIXIN
				for (let i = 0; i < imgs.length; i++) {
					await this.uploadImage(imgs[i].uri, imgs[i].name).then((res) => {
						if (i === imgs.length - 1) {
                            //全部上传完毕，dosomething
						}
					})
				}
				//#endif
			},

            //小程序的具体方法
            //批量上传，不要忘了带token之类的鉴权标识，这样封装是为了传输顺序可控，并且等待上一次的请求是否成功
			uploadImage(imagePath, name) {
				let that = this;
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: that.$config.apiUrl + that.initUrl2,
						filePath: imagePath,
						name: name,
						header: {
							'Authorization': ***
						},
						success: (res) => {
							console.log('上传成功:', res);
							resolve(); // 上传成功后resolve Promise  
						},
						fail: (err) => {
							that.$tip.loaded()
							that.$tip.toast(err.message)
							reject(err); // 上传失败后reject Promise  
						}
					});
				});
			}

#ifdef *** #endif

是uniapp做多端兼容的一种手段，在对应平台编译代码时，只会编译代表对应平台的代码。使用promise封装是为了让传输顺序可控，并且等待上一次的请求是否成功再继续执行代码。

每天一篇分享工作中遇到小坑，希望大家一起成长。前端未死，只要我们不卑不亢，负重前行。