uniapp小程序预览附件的曲线救国

背景:小程序接收到的附件,需要支持预览查看,或者使用收藏、转发的方式发送到自己的微信进行查看。
方式:通过文件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 });
            });
          },
        });
      }
    },
  });
};
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容