小程序云开发上传文件(pfd、文档、图片、视频、音乐。。。)

最新推荐文章于 2024-05-22 14:02:44 发布

编程小橘子

最新推荐文章于 2024-05-22 14:02:44 发布

阅读量550

点赞数 2

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序微信小程序前端 javascript

本文链接：https://blog.csdn.net/qq_43353619/article/details/121706215

微信小程序专栏收录该内容

20 篇文章

订阅专栏

这篇博客介绍了如何在微信小程序中实现文件上传的功能。首先，通过`chooseMessageFile`接口选择文件，然后使用`wx.cloud.uploadFile`将选定的文件上传到云端，并展示上传成功的提示。

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

话不多说，直接上代码：

wxml页面：

<view bindtap="chooseFile">上传</view>

js页面：

 //第一步：选择文件
  chooseFile(){
    let that = this
    wx.chooseMessageFile({
      count: 1,
      type: 'all',    // all 代表所有类型的文件都可以上传
      success (res) {
         wx.showLoading({
             title: '上传中...',
          });
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFiles
        let tempFile = tempFilePaths[0]
        that.uploadFile(tempFile.name,tempFile.path)
      }
    })
  },
  //第二步：通过uploadFile上传选中的文件
  uploadFile(fileName,tempFile){
    wx.cloud.uploadFile({
      cloudPath:fileName,
      filePath:tempFile,
    })
  .then(res=>{
    console.log("上传成功啦",res);
     wx.hideLoading()
    wx.showToast({
      title: '文件上传成功',
      icon:"success",
      duration:2000
    })
  })
  .catch(err=>{
    console.log("上传失败啦",err);
  })
  }