背景:小程序接收到的附件,需要支持预览查看,或者使用收藏、转发的方式发送到自己的微信进行查看。
方式:通过文件url,下载文件后以分享收藏的方式达到预览目的,安卓端可以直接通过预览打开文件,选择对应打开方式;
域名处理:因为小程序的downloadFile需要在小程序管理后台配置对应域名,所以文件地址域名需要根据情况是否需要做替换;
// 预览附件 savedFilePath为saveFile后拿到的文件路径
export const openFile = ({ savedFilePath, fileType }) => {
if (!savedFilePath) {
return uni.showToast({ title: '暂无可查看附件', icon: 'none' });
}
uni.openDocument({
filePath: savedFilePath,
fileType: fileType,
showMenu: true,
success: () => {},
fail: () => {
uni.showToast({ title: '预览失败', icon: 'none' });
},
});
};
// 分享附件
export const shareFile = ({ savedFilePath, type, fileName }) => {
return new Promise((resolve, reject) => {
if (!savedFilePath) {
uni.showToast({ title: '无可分享内容', icon: 'none' });
return reject();
}
if (type === MSG_TYPE['video']) {
uni.shareVideoMessage({
videoPath: savedFilePath,
success: () => {
resolve();
},
fail: () => {
reject();
},
});
} else if (type === MSG_TYPE['file']) {
uni.shareFileMessage({
filePath: savedFilePath,
fileName: fileName,
success: () => {
resolve();
},
fail: () => {
reject();
},
});
}
});
};
// 收藏附件
export const favoriteFile = ({ savedFilePath, type }) => {
return new Promise((resolve, reject) => {
if (!savedFilePath) {
uni.showToast({ title: '无可收藏内容', icon: 'none' });
return reject();
}
if (type == MSG_TYPE['video']) {
uni.addVideoToFavorites({
videoPath: savedFilePath,
success: () => {
resolve();
},
fail: () => {
reject();
},
});
} else if (type == MSG_TYPE['file']) {
uni.addFileToFavorites({
filePath: savedFilePath,
success: () => {
resolve();
},
fail: () => {
reject();
},
});
}
});
};
// 下载文件-先下载拿到临时路径,再保存为文件路径
const handlerDownLoadFile = (val) => {
// OSS文件地址,如果不是公网域名,需要将附件域名替换为公网域名
const fileUrl = val.url?.replace('附件域名', '公网域名');
uni.downloadFile({
url: fileUrl,
success: (res) => {
uni.getFileSystemManager().saveFile({
tempFilePath: res.tempFilePath,
success: ({ savedFilePath }) => {
// 拿到文件地址后,做展示或处理即可
},
fail: () => {
uni.showToast({ title: '文件下载失败', icon: 'none' });
},
});
},
fail: () => {
uni.showToast({ title: '下载失败', icon: 'none' });
},
});
};
⚠️:下载文件多次后,可能会报错文件下载缓存超过最大限制,需要手动清除缓存,可以根据实际使用做处理,使用getSavedFileList、removeSavedFile;
const handleClearFile = () => {
uni.showModal({
confirmText: '确定',
cancelText: '取消',
title: '提示',
content: '清除文件缓存',
success: (e) => {
if (e.confirm) {
uni.getFileSystemManager().getSavedFileList({
success: (res) => {
res?.fileList?.forEach((v) => {
uni.getFileSystemManager().removeSavedFile({ filePath: v.filePath });
});
},
});
}
},
});
};