uniapp文件上传下载:上传(uni-file-picker)资源下载(uni.downloadFile),保存到本地(uni.saveFile),打开文件预览(uni.openDocument)

文件上传的(uni-file-picker)

官方文档:uni-file-picker : 参考链接

		<!--template里面的html代码-->
		<uni-file-picker
            :value="listFiles"
            :limit="1"
            fileMediatype="all"
            mode="grid"
            @select="select"
            @progress="progress"
            @success="success"
            @fail="fail"
          >
            <view class="search-upload-btn">文件上传</view>
          </uni-file-picker>
//methods:里面对应函数
select(e) {
      console.log('选择文件:', e);
      let _this = this;
      let fileSize = e.tempFiles[0].size;
      uni.uploadFile({
        // url: _this.baseUrl + '/fyDataManage/indexEntered/uploadExcelData', //仅为示例,非真实的接口地址
        url: _this.baseUrl + '/fyDataManage/indexEntered/insertIndexExcelData', //真实的接口地址
        filePath: e.tempFiles[0].path,
        name: 'file',
        formData: {
          rbacToken: uni.getStorageSync('rbacToken'),
          date: new Date().getTime(),
          id: this.id
        },
        success: (_data) => {
          let res = JSON.parse(_data.data);
          console.log(res,'resresresresresresres');
          if (res.success === 1) {
            console.log(res);
            _this.fileId = res.data.fileId;
            _this.keyValue = res.data.value;
            _this.listFiles = [];
          } else {
            uni.showToast({
              mask: true,
              icon: 'none',
              title: res.message,
              duration: 2000,
            });
            _this.listFiles = [];
          }
        },
        fail: function (res) {
          console.log(res);
        },
      });
    },
    // 获取上传进度
    progress(e) {
      console.log('上传进度:', e);
    },

    // 上传成功
    success(e) {
      console.log('上传成功');
    },

    // 上传失败
    fail(e) {
      console.log('上传失败:', e);
    },



uniapp中实现文件资源下载(uni.downloadFile),保存到本地(uni.saveFile),打开文件预览(uni.openDocument)

官方文档:
uni.downloadFile() 参考
uni.saveFile() 参考

uni.downloadFile({
        url: _this.baseUrl + `/fyDataManage/indexEntered/downloadTemplate?id=${this.id}&rbacToken=${uni.getStorageSync('rbacToken')}`,//下载地址接口返回
        success: (data) => {
          console.log(data,'下载成功后的返回值:data');
          if (data.statusCode === 200) {
            //文件保存到本地
            uni.saveFile({
              tempFilePath: data.tempFilePath, //临时路径
              success: function(res) {
                uni.showToast({
                  icon: 'none',
                  mask: true,
                  title: '文件已保存:' + res.savedFilePath, //保存路径
                  duration: 3000,
                });
                setTimeout(() => {
                  //打开文档查看
                  uni.openDocument({
                    filePath: res.savedFilePath,
                    success: function(res) {
                      // console.log('打开文档成功');
                    }
                  });
                }, 3000)
              }
            });
          }
        },
        fail: (err) => {
          console.log(err);
          uni.showToast({
            icon: 'none',
            mask: true,
            title: '失败请重新下载',
          });
        },
      })
  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜空孤狼啸

你的鼓励是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值