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

爱丽丝和她的巫师帽

已于 2023-05-10 16:55:31 修改

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序 javascript 前端

于 2023-05-10 11:09:41 首次发布

本文链接：https://blog.csdn.net/technology_tyro/article/details/130596263

文章讲述了在处理通过downloadOaFile接口获取的二进制流时，必须设置uni.request的responseType为arraybuffer以避免文件损坏。res.data需要转换为arraybuffer才能正确写入文件，使用fs.writeFile完成文件写入，并根据文件扩展名决定用uni.previewImage预览图片还是wx.openDocument打开文件。

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

下面通过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打开图片还是文件

完整代码如下

        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)
            }
        })
      })