1.下载文件带进度提示
<template>
<view>
<button @click="startDownload">下载文件</button>
<progress :percent="progress" stroke-width="3" />
</view>
</template>
<script setup>
import {
ref
} from 'vue';
// 定义进度条数据
const progress = ref(0);
// 下载文件方法
const startDownload = () => {
const downloadTask = uni.downloadFile({
url: "http://localhost:5140/api/File/download", // 替换为你的API地址
success: (res) => {
console.log(res);
if (res.statusCode === 200) {
uni.showToast({
title: "下载成功",
icon: "success",
});
// 打开文件（根据文件类型选择打开方式）
uni.openDocument({
filePath: res.tempFilePath,
showMenu: true,
});
} else {
uni.showToast({
title: "下载失败",
icon: "none",
});
}
},
fail: (err) => {
console.error("下载失败", err);
uni.showToast({
title: "下载失败",
icon: "none",
});
},
});
// 监听下载进度
downloadTask.onProgressUpdate((res) => {
progress.value = res.progress; // 更新进度条
});
};
</script>
<style>
progress {
margin-top: 20px;
}
</style>