uni-app 微信小程序 上传图片 文件 uni.uploadFile()、uni.chooseImage()

微信小程序项目注册需要上传门店信息，所以需要用到上传图片功能。

可以分为两种情况：

1. 实时上传，接口返回url，返显图片地址预览。所需API: uni.uploadFile()、uni.chooseImage()。
2. 统一上传，接口统一接受所需字段，图片本地地址预览。所需API: uni.chooseImage()。
   一、实时上传
   点击选择框 首先使用uni.chooseImage()，从本地相册选择图片或使用相机拍照。成功则返回图片的本地文件路径列表 tempFilePaths；然后调取uni.uploadFile()

uni.chooseImage({
    success: (chooseImageRes) => {
    	// 获取的格式是数组，多选会同时返回，单选只返回一项
        const tempFilePaths = chooseImageRes.tempFilePaths;
        // 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
        uni.uploadFile({
            url: '', //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
                'user': 'test'  // 上传附带参数
            },
            success: (uploadFileRes) => {
            	// 根据接口具体返回格式   赋值具体对应url
                console.log(uploadFileRes.data);
            }
        });
    }
});

官方链接：uni.uploadFile

二、统一上传
点击选择框 首先使用uni.chooseImage()，从本地相册选择图片或使用相机拍照。成功则返回图片的本地文件路径列表 tempFilePaths；然后本地赋值保存本地图片地址。

uni.chooseImage({
    count: 6, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success:  (chooseImageRes) => {
    	// 获取的格式是数组，多选会同时返回，单选只返回一项
        this.imgArr.push(chooseImageRes.tempFilePaths)
    }
});
// 点击上传后循环调用uni.uploadFile ，因微信小程序只支持单文件上传
	this.imgArr.forEach(ele => {
		ele.forEach(item => {
			uni.uploadFile({
	            url: '', //仅为示例，非真实的接口地址
	            filePath: item,
	            name: 'file',
	            formData: {
	                'user': 'test'  // 上传附带参数
	            },
	            success: (uploadFileRes) => {
	            	// 根据接口具体返回格式   赋值具体对应url
	                console.log(uploadFileRes.data);
	            }
	        });
		})
	})
	

官方链接：uni.chooseImage

附上效果图：

标签：chooseImage,uploadFile,微信,tempFilePaths,uni,上传,图片
来源： https://blog.csdn.net/weixin_42980874/article/details/113354892