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

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

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

上一篇:树莓派4B+OSMC=电视盒子


下一篇:树莓派4B 64位系统使用笔记