关于uniapp在h5端无法保存视频的问题

最新推荐文章于 2025-05-15 22:11:31 发布

原创最新推荐文章于 2025-05-15 22:11:31 发布 · 525 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #音视频 #数学建模

该文章介绍了一个基础类库，用于处理文件下载和图片保存功能。在H5环境下，它使用`saveFile`方法模拟点击下载，并提供`download`函数下载文件。在非H5环境下，如uni-app，它利用`saveImageToPhotosAlbum`保存图片到相册。类库还包含一个长按图片触发的`operator`函数，用于保存图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先封装一个基础类库

import $common from '@/common/common.js';
export default {
	saveFile: function(url, success) {
	    const dA = document.createElement("a");
	    dA.download = ''; // 设置下载的文件名，默认是'下载'
	    dA.href = url;
	    document.body.appendChild(dA);
	    dA.click();
	    dA.remove(); // 下载之后把创建的元素删除
	    success(); //运行回调
	},
	//点击事件触发此函数保存文件
	download(url) {
		$common.loading();
		uni.downloadFile({
		    url: url,
		    success: (res) => {
		        const fileUrl = res.tempFilePath;
		        // #ifdef H5
		        this.saveFile(fileUrl, () => {
		            setTimeout(() => {
						$common.loading(false);
						$common.tips('下载成功');
					}, 1500)
		        });
		        // #endif
		        // #ifndef H5
		        uni.saveImageToPhotosAlbum({
		            filePath: fileUrl,
		            success: () => {
		                uni.showToast({
		                    title: "下载成功"
		                });
		            },
		            complete: () => {
		                $common.loading(false);
		            }
		        });
		        // #endif
		    }
		})
	},
	//长按图片触发此函数，保存图片
	operator(url) {
		$common.loading();
	    uni.showActionSheet({
	        itemList: ["保存图片"],
	        success: (res) => {
	            if (res.tapIndex === 0) { //数组下标
	                uni.showLoading({
	                    mask: true,
	                    title: "下载中..."
	                });
	                uni.downloadFile({
	                    url: url,
	                    success: (res) => {
	                        const fileUrl = res.tempFilePath;
	                        // #ifdef H5
	                        this.saveFile(fileUrl, () => {
	                            $common.loading(false);
	                        });
	                        // #endif
	                        // #ifndef H5
	                        uni.saveImageToPhotosAlbum({
	                            filePath: fileUrl,
	                            success: () => {
	                                uni.showToast({
	                                    title: "下载成功"
	                                });
	                            },
	                            complete: () => {
	                                $common.loading(false);
	                            }
	                        });
	                        // #endif
	                    }
	                })
	            }
	        }
	    })
	}
}

然后在页面调用

//下载视频
import $download from '@/common/download.js';
/*其他代码*/
downloadVideo() {
	$download.download(this.videoUrl);
}