小程序-云存储实现对文件的上传下载

案例：上传excel文件，下载并打开excel文件，上传图片并在页面显示，上传视频在页面显示

上传excel文件

index.wxml

<button bindtap="uploadexcel">上传excel文件</button>

index.js

Page({
    //上传excel文件
    uploadexcel(){
        wx.chooseMessageFile({
            count: 1,
            type:\'all\',
            success(res){
                console.log("选择Excel成功",res);       
                //tempFilePath可以作为img标签的src属性显示图片
                const tempFilePaths=res.tempFiles[0].path
                wx.cloud.uploadFile({
                    cloudPath:"excel.xlsx",//上传到云端的路径
                    filePath:tempFilePaths,//小程序的临时文件路径
                    success:res=>{
                        console.log("上传excel成功",res);
                    },
                    fail:err=>{  
                    }
                })
            }
        })
    }
})

下载并打开excel文件

index2.wxml

<button bindtap="openExcel">下载并打开excel文件</button>

index2.js

Page({
    //下载并打开excel文件
    openExcel(){
        wx.cloud.downloadFile({
            // 示例 url，并非真实存在
            url: \'cloud://myminiprogram-xdqs5.6d79-myminiprogram-xdqs5-1302292245/excel.xlsx\',
            success: function (res) {
                    const filePath = res.tempFilePath
                    wx.openDocument({
                    filePath: filePath,
                    success: function (res) {
                        console.log(\'打开文档成功\')
                    }
                })
            }
        })   
    }
})

上传图片并在页面显示

index3.wxml

<button bindtap="upload">上传文件</button>
<image src="{{imgUrl}}"></image>

index3.js

Page({
    data:{
        imgUrl:""
    },
    //上传文件
    upload(){
        let that=this;
        console.log("点击了上传");
        wx.chooseImage({
            count:1,
            sizeType:[\'original\',\'compressed\'],
            sourceType:[\'album\',\'camera\'],
            success: (res) => {
                console.log("选择成功",res)
                //tempFilePath可以作为img标签的src属性显示图片
                const tempFilePaths=res.tempFilePaths
                that.uploadImg(res.tempFilePaths[0])
            }
        })
    },
    //上传图片的部分代码
    uploadImg(fileUrl){
        wx.cloud.uploadFile({
            //时间戳
            cloudPath:new Date().getTime()+"qqq.png",//上传到云端的路径
            filePath:fileUrl,//小程序的临时文件路径
            success:res=>{
                console.log("上传成功",res);
                //上传图片显示
                this.setData({
                imgUrl:res.fileID
                })
            },
            fail:err=>{

            }
        })
    }
})

上传视频在页面显示

这里没有封装，上传图片有封装

index5.wxml

<button bindtap="uploadvideo">上传视频</button>
<video wx:if="{{videoUrl}}" src="{{videoUrl}}"></video>

index5.js

Page({
    data:{
        videoUrl:""
    },
    //上传视频
    uploadvideo(){
        wx.chooseVideo({
            sourceType: [\'album\',\'camera\'],
            maxDuration: 600,//视频时长
            camera: \'back\',
            success(res) {
                console.log("选择视频成功",res.tempFilePath)
                wx.cloud.uploadFile({
                    //时间戳
                    cloudPath:"shiping.mp4",//上传到云端的路径
                    filePath:res.tempFilePath,//小程序的临时文件路径
                    success:res=>{
                        console.log("上传视频成功",res);
                        //上传视频显示
                        this.setData({
                        videoUrl:res.fileID
                        })
                    },
                    fail:err=>{
                
                    }
                })
            }
        })
    }
})