今天看同事代码,他写小程序图片上传运用了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)
})

Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐