美文网首页
微信小程序-云开发(2)选择上传换路径下载删除图片

微信小程序-云开发(2)选择上传换路径下载删除图片

作者: Christoles | 来源:发表于2019-05-05 00:52 被阅读0次
    wxml:
    <view>
        <image src="{{imgUrl}}" mode="aspectFit"/>
      <button bindtap="sel">选择图片</button>
      <button bindtap="upload">上传图片</button>
        <!-- <image src="https://7465-test-1adh8-1259161555.tcb.qcloud.la/images/1?sign=0fec6515dc17db97123585c0a0a46589&t=1556961798"/> -->
      <button bindtap="download">下载上传的图片</button>
      <button bindtap="getUrl">根据id换取图片路径</button>
        <image src="{{downImgUrl}}"/>
      <button bindtap="delFile">删除文件</button>
    </view>
    
    js:
    data: {
        imgUrl:'../../images/bf.jpg',
        downImgUrl:'',
        fileId:''
    },
    onLoad: function() {
        this.db = wx.cloud.database();
        this.mycol = this.db.collection("022project");
    },
    //选择图片
    sel(){
        var that = this;
        wx.chooseImage({//wx.chooseImage
            success(res){
                console.log("选择图片成功!",res)
                that.setData({
                    imgUrl:res.tempFilePaths[0]
                })
            }
        })
    },
    //上传图片
    upload(){
        var that = this;
        wx.showToast({
            title:"上传中",
            icon:"loading"
        })
        wx.cloud.uploadFile({
            cloudPath:"images/1",//可以不写后缀,会自动创建到云储存中
            filePath:that.data.imgUrl,
            success(res){
                wx.showToast({
                    title:"上传成功",
                    icon:"success",
                    duration:2000
                })
                that.setData({
                    fileId:res.fileID
                })
                console.log("图片上传成功!",res)
            }
        })
    },
    //下载上传的图片
    download(){
        wx.cloud.downloadFile({
            fileID:this.data.fileId
        }).then(res=>{
            console.log("下载成功!",res)//
        })
    },
    //换取路径
    getUrl(){
        var that = this;
        wx.cloud.getTempFileURL({
            //--fileList: 数组元素为需要换取文件路径的id值
            fileList:["cloud://test-1adh8.7465-test-1adh8/images/1"],
            success(res){
                console.log("获取真实路径",res)//返回的是图片下载地址
                that.setData({
                    downImgUrl:res.fileList[0].tempFileURL
                })
            }
        })
    },
    //删除文件
    delFile(){
        var that = this;
        wx.cloud.deleteFile({
            fileList:["cloud://test-1adh8.7465-test-1adh8/images/1"],
            success(res){
                console.log("删除文件:",res)
                that.setData({
                    downImgUrl:res.fileList[0]//TODO
                })
            }
        })
    }
    

    相关文章

      网友评论

          本文标题:微信小程序-云开发(2)选择上传换路径下载删除图片

          本文链接:https://www.haomeiwen.com/subject/cduqoqtx.html