uniapp封装图片上传

今天看同事代码,他写小程序图片上传运用了uview Upload的上传组件,但是他没有封装成公用组件,让我浑身不舒服。

我利用了uniapp的 chooseImage和uploadFile这样我们可以直接调用方法就行,并且支持选择图片上传或者拍照上传,话不多说,上代码

//图片选择
export const chooseImage = function(data) {
	return new Promise((resolve, reject) => {
		uni.chooseImage({
			count: data.count || 1, //默认1
			sizeType: 'compressed', //可以指定是原图还是压缩图,默认二者都有
			sourceType: data.sourceType || ['camera', 'album'], //从相册选择
			success: function(res) {
				resolve(res.tempFiles);
			},
			fail: err => {
				uni.hideLoading()
				reject(err);
			}
		});
	});
}

// 上传图片
export const selectImg = async function(callback) {
	let files;
	let options = {};
	let token = 'Bearer ' + uni.getStorageSync('token'); // 看个人需求
	try {
		files = await chooseImage(options);
		console.log(files)
		uni.uploadFile({
			url: requestURL_dev + '/common/upload',
			filePath: files[0].path,
			name: 'file',
			header: {
				Authorization: token
			},
		 success: (uploadFileRes) => {
				if (uploadFileRes.statusCode == 200) {
					uni.showToast({
						title: '上传成功!',
						icon: 'none'
					});
					callback(uploadFileRes);
				} else {
					uni.showToast({
						title: '网络错误,上传超时!',
						icon: 'none'
					});
				}
			},
			fail: (res) => {},

		});
	} catch (err) {
		console.log(err)
	}
}

这样的话,我们直接在代码中可以引用 selectImg 这个发,或者全局注册一下

// 直接使用
selectImg((data) => {
    console.log(data)
})

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值