本次遇到的问题都可以在微信api中查询到相关的方法,就是一开始找的是否比较费劲所以记录分享一下,方便遇到相关的问题,容易查看。
遇到的问题
- 从微信选取和手机中选取怎么实现。
从微信中导入文件图片
uni.chooseMessageFile({
count: 9, // 最多选取的数量
type: type, // all 所有文件选择, video, image, file
success: async res => {
const tempFiles = res.tempFiles; // 文件的临时路径
// 可以进行上传
},
fail: err => {
console.log(err);
}
});
本地相册选择图片或使用相机拍照
uni.chooseImage({
sourceType: ['album'], //从相册选择
sizeType: ['original', 'compressed'], // 所选的图片的尺寸
success: async res => {
const tempFiles = res.tempFiles; // 图片的路径
console.log(tempFiles);
// 可以进行上传
},
fail: function(err) {}
});
预览文件,图片
预览图片
uni.previewImage({
current: item.path, // 当前显示图片的链接
urls: list // 需要预览的图片链接列表 [url1, url2]
});
预览文件
- 预览文件首先要进行文件下载。
- 在文档打开的时候,有个下载过程,要加个等待过程,增加体验感。
- 需要注意两点。
- 文件的下载地址域名,要在后台进行配置
- 下载后的临时路径要保存下来,防止再次打开的时候,又重新下载一次。
// 文档预览
previewFile(item) {
// 已经下载过的文档不用再次下载,直接打开
if (item.tempFilePath) {
uni.openDocument({
filePath: item.tempFilePath,
success: function(res) {
console.log(res, '文档打开');
},
fail: function(res) {
console.log(res, '文档打开失败');
}
});
return;
}
uni.showLoading({
title: '文档打开中'
});
const downloadTask = wx.downloadFile({
url: item.path,
success(res) {
const filePath = res.tempFilePath;
console.log(filePath);
item.tempFilePath = filePath;
uni.openDocument({
filePath: filePath,
success: function(res) {
console.log(res, '文档打开');
},
fail: function(res) {
console.log(res, '文档打开失败');
}
});
},
fail(res) {
uni.hideLoading();
uni.showToast({
title: '文档打开失败,请重新打开',
duration: 1000,
icon: none
});
}
});
downloadTask.onProgressUpdate(res => {
// 下载完成后,关闭loading 弹窗。
if (res.progress >= 100) {
uni.hideLoading();
}
console.log('下载进度', res.progress);
console.log('已经下载的数据长度', res.totalBytesWritten);
console.log(
'预期需要下载的数据总长度',
res.totalBytesExpectedToWrite
);
});
},
总结
本篇文章主要记录开发中遇到的问题,有问题欢迎留言哦,有错误欢迎指正哦。