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