文档中心 > 店铺动态卡片-开发指引

千牛PC端文件解决方案

更新时间:2024/07/31 访问次数:7615

一、上传文件

千牛PC端小程序上传文件有2种方案。第一种上传到云存储,第二种通过云应用上传到自己的服务端进行存储。

1.服务端是云函数

通过接口 my.qn.chooseFile获取本地文件的临时路径,然后上传到云存储

const {cloud} = getApp(); 
Page({  
  data:{},  
  onLoad(query) {  
    // 页面加载  
  },   
  async  testUploadFile(){  
       my.qn.chooseFile({
        count: 1,   // 返回的文件数,默认 1
        type: 0x02, // 图片=0x01,文档=0x02,多媒体=0x04,自由组合,默认 0x01
        success: (res) => {
          console.log("上传文件 res:"+res); 
          try{
            cloud.file.uploadFile({
                filePath: res.apFilePaths[0],  
                fileType: 'other',  
                fileName: 'new.xlsx',  
            }).then((data) => {
                console.log(data);
            })
           }catch(e) {
             console.log("fail:"+ e);
          }
        }
      })
    }
});

2.服务端是云应用

详细方案

方法一

通过接口 my.qn.chooseFile获取本地文件的临时路径,然后上传到云存储,将上传到云存储获取的访问链接传到云应用中,云应用中进行解析获取文件内容。

方法二

通过接口 my.qn.chooseFileAndGetContent 获取到文件内容,将文件内容直接传输到云应用中,前提是传输的内容不能超过128KB。

注:在自身服务器接口中要对文件内容进行base64解码后,再进行处理。


示例代码

const {cloud} = getApp(); 
Page({  
  data:{},  
  onLoad(query) {  
    // 页面加载  
  },   
  async testQnContent(){
   my.qn.chooseFileAndGetContent({
      count: 1,
      type: 0x02,
      success: (res) => {         
        // {"fileContentMap":{"test1.txt":"YWJj","test2.txt":"MTIz"}}
        //文件内容经过base64进行了编码
        let contentMap = res.fileContentMap;
        console.log("内容:"+contentMap);
     
          try{
            const result =  cloud.application.httpRequest({
              //在uploadFile接口中需要对文件内容进行base64解码
              'path' : '/uploadFile', 
              'method':'POST',
              'headers':{
                'Content-Type':'application/json;charset=UTF-8',
              },
              'params':{},
              'body':{
                    //fileContentMap里面保存文件名称以及经过base64编码后的文件内容
                    'fileContentMap':contentMap
              },
            //对于一个小程序关联多个云应用的场景,调用非默认云应用,需要指定对应的云应用Id,超时时间单位ms
              'exts':{  "cloudAppId":"8676" ,"timeout":3000}  
              });
              console.log(JSON.stringify(result));
          } catch(e) {
            console.log("fail: "+ e);
          }
      }
    })
  }
});


后端服务器

@PostMapping("/uploadFile")
public String uploadFile(@RequestBody FileDTO fileDTO){

    Map<String, String> fileContentMap = fileDTO.getFileContentMap();

    Iterator<Map.Entry<String, String>> iterator = fileContentMap.entrySet().iterator();
    while (iterator.hasNext()){
        Map.Entry<String, String> fileItem = iterator.next();
        String fileName =  fileItem.getKey();
        String fileData = fileItem.getValue();
        // 使用Base64Utils的decode方法进行解码
        byte[] fileBytes = Base64Utils.decode(fileData);
        //TODO 处理文件逻辑
        ....
    }

    return "";
}

二、下载文件

前提:将文件上传至云存储,通过文件id去下载。

详细方案

1.通过 cloud.file.getTempFileURL 接口获取到文件在线访问链接。

2.通过 my.downloadFile 接口下载文件获取到本地临时路径(注意,该接口仅支持https协议链接,且必须是阿里系链接;云存储文件类型返回的链接都是https协议,且为阿里系链接,直接使用即可)。

3.通过 my.qn.saveFileToDisk 接口下载到电脑磁盘里。

示例代码

const {cloud} = getApp(); 
Page({  
  data:{},  
  onLoad(query) {  
    // 页面加载  
  },  
  async testDownFile(){
      cloud.file.getTempFileURL({  
        fileId: ['cloud://C2D1DD8DC3B4xxx2EC4933963/test.xlsx']  
      }).then((data) => {
          console.log(data[0].url);
          let url = data[0].url;
          my.downloadFile({
            url: url,
            success({ apFilePath }) {
              console.log(apFilePath);
              my.qn.saveFileToDisk({
                apFilePath: apFilePath, // apFilePath from other APIs
                complete: (res) => {
                  console.log(res)
                },
               })
            },
            fail(e) {
              console.log("fail:"+e);
            },
          });
      })  
  }
});

FAQ

关于此文档暂时还没有FAQ
返回
顶部