微信小程序的附件上传与预览

微信小程序的附件上传与预览

文件与图片上传

    wx.chooseMessageFile({
      count: 10,
      type: 'file',
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图
        const tempFilePaths = res.tempFiles;
        var wjpath = tempFilePaths[0].path;
        var fname = tempFilePaths[0].name;
        var hz = tempFilePaths[0].type;

        console.log(wjpath, fid, fromid, "tempFilePaths");
        wx.getFileSystemManager().readFile({
          filePath: wjpath,
          encoding: 'base64',
          success: res => {
            console.log(res.data, "wjbase64");
            request({
              url: "上传的url",
              method: "POST",
              data: {
                FileName: fname,
                FormId: fromid,
                FId: fid,
                BillNO: bno,
                AliasFileName: hz,
                SendByte: res.data
              }
            }).then(res => {
              let resdata = JSON.parse(res);
              console.log(resdata, "resdata");
              if (resdata.Result.ResponseStatus.IsSuccess) {
                wx.showToast({
                  title: '上传成功',
                  icon: 'success',
                  duration: 200
                })
                this.Lookfilelist(this.data.fid);
              } else {
                wx.showModal({
                  title: '提示',
                  content: "上传失败" + resdata.Result.ResponseStatus.Errors[0].Message,
                  success: function (res) {
                    if (res.confirm) {
                      console.log('用户点击确定')
                    } else if (res.cancel) {
                      console.log('用户点击取消')
                    }
                  }
                })
              }
            
            })
          }
        })
      }
    })

 

图库上传

    wx.chooseMedia({
      count: 1,
      mediaType: ['image', 'video'],
      sourceType: ['album', 'camera'],
      maxDuration: 30,
      camera: 'back',
      success: res => {
        console.log(res);
        var imagepath = res.tempFiles[0].tempFilePath;
        var imagetype = res.tempFiles[0].fileType;
        console.log(imagepath, imagetype, "---");
        wx.getFileSystemManager().readFile({
          filePath: imagepath, //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: (res) => {
            wx.showLoading({
              title: "上传中",
              mask: true
            });
            let baseImg = res.data;
            console.log(baseImg, "baseImg");
            request({
              url: "上传的url",
              method: "POST",
              data: {
                FileName: "图库图片.jpg",
                FormId: fromid,
                FId: fid,
                BillNO: bno,
                AliasFileName: "jpg",
                SendByte: baseImg
              }
            }).then(res => {
              let resdata = JSON.parse(res);
              console.log(resdata, "resdata");
              if (resdata.Result.ResponseStatus.IsSuccess) {
                wx.showToast({
                  title: '上传成功',
                  icon: 'success',
                  duration: 2000
                })
                this.Lookfilelist(this.data.fid);
              } else {
                wx.showModal({
                  title: '提示',
                  content: "上传失败" + resdata.Result.ResponseStatus.Errors[0].Message,
                  success: function (res) {
                    if (res.confirm) {
                      console.log('用户点击确定')
                    } else if (res.cancel) {
                      console.log('用户点击取消')
                    }
                  }
                })
              }
            })
            wx.hideLoading();
         
          }
        })
      }
    })

 

预览，--调用api返回base64格式保存到临时路径在预览

    request({
      url: "调用api" ,
      method: "POST",
    }).then(res => {

      let redata = JSON.parse(res);
      var fjnaeme = redata.Result.FileName;
      // 假设base64ImageData是你的base64格式图片数据
      var base64ImageData = redata.Result.FilePart;
      console.log(redata, "base64ImageData");
      const base64 = base64ImageData;
      const time = new Date().getTime();
      const path = wx.env.USER_DATA_PATH + "/" + fjnaeme;
      const file = wx.getFileSystemManager();
      file.writeFileSync(path, base64, "base64");
      console.log(path, "path");
      var sj = fjnaeme.substring(fjnaeme.indexOf(".") + 1, fjnaeme.length);
      var mc = fjnaeme.substring(fjnaeme.indexOf("."), 0);
      console.log(sj, "sj", mc);
      if (sj == "doc" || sj == "docx" || sj == "xls" || sj == "xlsx" || sj == "ppt" || sj == "pptx" || sj == "pdf") {
        this.openFile(path, sj);、、文件预览方法
      } else {
        this.openimage(path);//图片预览方法
      }



    })

 

  openFile(filePath, fileType) {
    wx.openDocument({
      filePath: filePath, // 装载对应文件的路径
      fileType: fileType, // 指定打开的文件类型
      showMenu: true, // 右上角的菜单转发分享操作
      success: function (res) {
        console.log("打开成功");
      },
      fail: function (res) {
        console.log(res);
        wx.showToast({
          type: 'error',
          title: '该格式不支持浏览',
          icon: 'fail',
          duration: 2000
        })
      }
    })
  },
  openimage(filePath) {
    wx.previewImage({
      current: 1,
      urls: [
        filePath
      ], //imgUrl 必须是需要预览的图片链接列表，只有一张图片也需要是列表
      success: (res => {
        console.log('接口调用成功', res)
      }),
      fail: function (res) {
        console.log(res);
        wx.showToast({
          type: 'error',
          title: '该格式不支持浏览',
          icon: 'fail',
          duration: 2000
        })
      }
    })
  },