Uniapp下载文件到手机的实现

一、获取文件路径

在进行下载文件之前，我们需要先获取到要下载的文件的URL或者URI。

对于URL或者URI的获取，可以通过以下方式:

// 使用uni.request 发起GET请求
uni.request({
  url: 'http://httpbin.org/get',
  success: function (res) {
    console.log(res.data);
  }
});

如果我们要获取远程服务器上的图片，则可以像下面这样获取:

uni.request({
      url:"http://www.test.com/if_1.jpg",
      success(res) {
          let filePath = res.tempFilePath
        }
})

二、下载文件

接下来，我们需要用uni.downloadFile从服务器上下载文件，下载成功后就可以将其保存在本地存储中。

uni.downloadFile({
        url: "要下载的文件链接",
        success(res){
            console.log(res.tempFilePath)
            uni.saveFile({
                tempFilePath: res.tempFilePath,
                success(res) {
                        console.log('下载成功，文件保存在：' + res.savedFilePath)
                    },
                    fail(res){
                        console.log('下载失败')
                    }
               })
           }
})

三、显示下载进度

为了更好地让用户了解下载的进度，可以实现一个进度条，实时显示下载进度。

代码示例:

uni.downloadFile({
        url: "要下载的文件链接",
        success(res){
            console.log(res.tempFilePath)
            uni.saveFile({
                tempFilePath: res.tempFilePath,
                success(res) {
                        console.log('下载成功，文件保存在：' + res.savedFilePath)
                    },
                    fail(res){
                        console.log('下载失败')
                    }
               })
           },
        onProgressUpdate(res){
            console.log('下载进度' + res.progress + '%')
        }
})

四、下载失败的处理

当下载失败时，我们需要为用户提供友好的错误信息，提示用户文件下载失败。

示例代码如下:

uni.downloadFile({
    url:"要下载的文件链接",
    success(res){
        // 下载成功
    },
    fail(res) {
        uni.showToast({
            title: '文件下载失败',
            icon: 'none'
        })
    }
})

以上就是实现uniapp文件下载到手机的全过程。在实际应用场景中，可能还需要结合业务需求进行优化和扩展。