微信小程序接收二进制流文件（图片预览，文件打开）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序接收二进制流文件（图片预览，文件打开）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

下面通过downloadOaFile接口获取到二进制流，即res.data

注意！！！直接用downloadOaFile获取的二进制流文件在写入时会导致文件损坏，必须在uni.request对象的属性中加上

uni.request({responseType: 'arraybuffer',...})

如果不加，默认是

responseType: 'text'

这一点非常重要，踩了好久的坑，而且这两点的区别在network的response中还看不出来，因为两者的res.data看上去都是二进制流

注：arraybuffer是js内置的类，用于操作二进制文件，和blob差不多，所以我感觉也可以将res.data转成arraybuffer，之后再用fs.write写入

下面是转为的arraybuffer的方案，但是由于没试过，我也不知道能不能成功

const textEncoder = new TextEncoder();
const arrayBuffer = textEncoder.encode(data).buffer;

const arrayBuffer是一个arrayBuffer对象,用buffer方法得到的

注：arraybuffer也可以通过new出来，它就是一段连续的内存空间，但是很神奇居然可以用变量申请内存大小如下

const arrayBuffer = new ArrayBuffer(len)//len可以是变量

但是不能直接操作arraybuffer，必须再arraybuffer上建立视图，从而进行写入和释放内存操作

const dataView = new DataView(arraybuffer);

参考`ArrayBuffer`对象到底是什么简单读懂 - 掘金

接着用getFileSystemManager将二进制流写成文件

const fs = uni.getFileSystemManager(); //获取全局唯一的文件管理器

fs.writeFile({...})//将二进制流写成文件

最后通过文件扩展名判断用uni.previewImage或者wx.openDocument这两个api打开图片还是文件

完整代码如下文章来源地址https://www.toymoban.com/news/detail-564952.html

        let filePath = wx.env.USER_DATA_PATH + "/"+item.storageFileName;
        console.log(1111111111,item)
        downloadOaFile({
          filePath:item.storageFileName,
          fileName:item.storageFileName,
        }).then(res=>{
          const fs = uni.getFileSystemManager(); //获取全局唯一的文件管理器
          // fs.access({
          //   path: wx.env.USER_DATA_PATH,
          //   success: function(res) {
          //     console.log("临时文件目录已存在",res);
          //   },
          //   fail: function(err) {
          //     console.log("临时文件目录不存在，现在创建目录",err);
          //     fs.mkdir({
          //       dirPath: wx.env.USER_DATA_PATH,
          //       recursive: true,
          //       success: function(res) {
          //         console.log("创建目录成功",res);
          //       },
          //       fail: function(err) {
          //         console.log("创建目录失败",err);
          //       }
          //     });
          //   }
          // })
          console.log(filePath)
          console.log(typeof filePath)


          fs.writeFile({ // 写文件
            filePath: filePath, // wx.env.USER_DATA_PATH 指定临时文件存入的路径，后面字符串自定义
            data: res.data,
            encoding: "binary", //二进制流文件必须是 binary
            success (res){
              let imgExtName = ['png','jpg']
              console.log("成功写入文件",res)
              if (imgExtName.indexOf(item.extname)>-1){
                uni.previewImage({
                  current:item.storageFileName,
                  urls:[filePath],
                  success: function (res) {
                    console.log("成功打开图片",res)
                    console.log(filePath)

                    // setTimeout(()=>{wx.hideLoading()},500)
                  },
                  fail(res){
                    console.log("失败打开图片",res);
                  }
                })
              }else{

                wx.openDocument({ // 新开页面打开文档
                  fileType:item.extname,
                  filePath: filePath,  //拿上面存入的文件路径
                  success: function (res) {
                    console.log("成功打开文件")
                    // setTimeout(()=>{wx.hideLoading()},500)
                  },
                  fail(res){
                    console.log("失败打开文件",res)
                  }
                })
              }

            },
            fail(res){
              console.log("写文件失败",res)
            }
        })
      })

到了这里，关于微信小程序接收二进制流文件（图片预览，文件打开）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！