微信小程序云存储(文件上传到云端)

这篇具有很好参考价值的文章主要介绍了微信小程序云存储(文件上传到云端)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、云存储

  我们直到,云开发控制台更多的是对项目中的初始文件的操作管理,例如项目的Logo图片可以通过云开发控制台提起上传到云端。项目在执行的过程中也会涉及文件的操作,例如用户上传图片的操作,这时就需要用到云开发存储API。

  小程序云开发提供了一系列存储操作API,有uploadFile()文件上传接口、downloadFile()下载文件接口、deleteFile()删除文件接口和getTempFileURL()换取临时链接接口。

  wx.cloud.uploadFile()接口的参数列表如下所示。如果采用callback风格,调用回调函数success、fail、complete中的任何一个,则会返回一个UploadTask对象(封装返回信息的对象),通过UploadTask对象可监听上传事件。

字段 说明 数据类型 默认值 必填
cloudPath 云存储路径,命名限制见文件名命名限制 String - Y
filePath 要上传文件资源的路径 String - Y
config 配置 Object - N
success 成功回调
fail 失败回调
complete 结束回调

config 对象定义

字段 说明 数据类型
env 使用的环境 ID,填写后忽略 init 指定的环境 String

success 返回参数

字段 说明 数据类型
fileID 文件 ID String
statusCode 服务器返回的 HTTP 状态码 Number
errMsg 错误信息,格式 uploadFile:ok String

fail 返回参数

字段 说明 数据类型
errCode 错误码 Number
errMsg 错误信息,格式 uploadFile:fail msg String

返回值

  如果请求参数中带有 success/fail/complete 回调中的任一个,则会返回一个 UploadTask 对象,通过 UploadTask 对象可监听上传进度变化事件,以及取消上传任务。

2、云存储上传文件示例

2.1 wx.cloud.uploadFile()接口测试

  小程序端uploadFile.wxml代码如下:

<!--index.wxml-->
<view class="container">

  <!-- 用户 openid -->
  <view class="userinfo">
    <button 
      open-type="getUserInfo" 
      bindgetuserinfo="onGetUserInfo"
      class="userinfo-avatar"
      style="background-image: url({{avatarUrl}})"
    ></button>
    <view>
      <button class="userinfo-nickname" bindtap="onGetOpenid">点击获取 openid</button>
    </view>
  </view>


  <!-- 上传图片 -->
  <view class="uploader">
    <view class="uploader-text" bindtap="doUpload">
      <text>上传图片</text>
    </view>
    <view class="uploader-container" wx:if="{{imgUrl}}">
      <image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg"></image>
    </view>
  </view>

</view>

  uploadFile.js

//index.js
const app = getApp()

Page({
  data: {
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: ''
  },

  onLoad: function() {
    if (!wx.cloud) {
      wx.redirectTo({
        url: '../chooseLib/chooseLib',
      })
      return
    }
  },

  // 上传图片
  doUpload: function () {
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        console.log(res)
        wx.showLoading({
          title: '上传中',
        })

        const filePath = res.tempFilePaths[0]
        var timestamp = (new Date()).valueOf();//新建日期对象并变成时间戳
        wx.cloud.uploadFile({
          cloudPath: "img/"+timestamp+".jpg", // 上传至云端的路径
          filePath: filePath, // 小程序临时文件路径
          success: res => {
            console.log('[上传文件] 成功:', res)
            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath
            
            wx.navigateTo({
              url: '../storageConsole/storageConsole',
            })
          },
          fail: e => {
            console.error('[上传文件] 失败:', e)
            wx.showToast({
              icon: 'none',
              title: '上传失败',
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  },

})

  代码讲解:本例先调用了wx.chooseImage()接口选择一幅图片,然后调用wx.cloud.uploadFile()接口上传图片到云端。cloudPath字段是上传文件在云端的文件名字,为了不重复,这里采用了当前时间戳来命名云端文件名。filePath字段是本地文件的路径,它的值取wx.chooseImage()接口的回调参数res.tempFilePaths[0]。

  示例效果如下:

微信小程序云存储(文件上传到云端)

  点击上传图片,并选择一张图片上传。

微信小程序云存储(文件上传到云端)

微信小程序云存储(文件上传到云端)

  上传完毕后取云开发控制台中查看是否上传成功

微信小程序云存储(文件上传到云端)

  上传成功,没有任何的问题。

2.2 其他接口

  wx.cloud.downloadFile()接口从云存储空间下载文件的示例代码如下:

wx.cloud.downloadFile({
  fileID: 'a7xzcb',
  success: res => {
    // get temp file path
    console.log(res.tempFilePath)
  },
  fail: err => {
    // handle error
  }
})

  deleteFile(fileList: string[])接口删除云端文件的示例代码如下:文章来源地址https://www.toymoban.com/news/detail-487359.html

wx.cloud.deleteFile({
  fileList: ['a7xzcb'],
  success: res => {
    // handle success
    console.log(res.fileList)
  },
  fail: err => {
    // handle error
  },
  complete: res => {
    // ...
  }
})

到了这里,关于微信小程序云存储(文件上传到云端)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序是如何上传文件以及下载文件

    微信小程序可以使用wx.uploadFile() API来上传文件,使用wx.downloadFile() API来下载文件。 上传文件的步骤如下: 1、创建一个选择文件的按钮。 2、用户点击按钮后,调用wx.chooseImage()方法来选择文件。 3、调用wx.uploadFile()方法上传文件。 示例代码如下: 下载文件的步骤如下: 1、创

    2024年02月11日
    浏览(48)
  • uniApp、微信小程序上传单个文件及多个文件

    使用官方api - uni.uploadFile 这是单个文件上传写法 这是上传多个文件写法 由于没有多个上传文件的方法,目前只能通过遍历的方式来进行多文件上传

    2024年04月16日
    浏览(48)
  • 【小程序教程】微信小程序之Upload文件上传

    一、概述 微信小程序是一种基于移动互联网技术的轻应用,提供了许多内置的功能和API,可以方便地实现各种应用开发。其中,文件上传是一项非常常见的功能,小程序提供了upload API用于文件上传。今天,我们就来探讨一下如何使用微信小程序的upload API进行文件上传。 二、

    2024年02月05日
    浏览(35)
  • 微信小程序上传文件及图片(可以预览)

    最近在写小程序项目,碰到了一个需求,需要用户可以上传各种类型的文件和图片,展示在页面上,并且点击还可以进行预览,就找了找微信小程序官网,写了一个例子,分享一下 直接看代码: wxml: wxss: js: 有问题和建议欢迎大家留言

    2024年02月12日
    浏览(53)
  • 微信小程序文件上传无响应解决方法

    今天更新了下小程序,发现文件上传无法拉起拍照或者选择照片,点击上传按钮,没有反应,也没有任何报错,顿时就一顿蒙蔽。最后灵机一动想起了,微信最近更新了隐私协议,文件上传需要用到 这些接口,而这些接口都是需要先在隐私协议中声明,才可以使用的,最终我

    2024年02月06日
    浏览(78)
  • uniapp微信小程序实现大文件上传 分片上传 进度条

    一、安装   二、页面引入  三、实现功能(重要)         1.获取图片的路径         2.设置分片的大小         3.将数据放入 四、实现上传进度条 全部函数js 五、修改npm的源码,处理请求源码中请求所携带的参数问题,以及报错处理(重要) 修改npm后的源码。

    2024年02月03日
    浏览(49)
  • 微信小程序使用webview实现文件上传功能

    项目开发了一个批示单的功能,用户填写批示单信息要上传正文及附件(多文件上传,有需要可在文章末尾查看),上传文件功能原调用的是uni.chooseMessageFile方法选择聊天记录中文件。 问题:用户在电脑端打开小程序后发现选择文件按钮点击无反应。 百度后发现此方法电脑

    2024年03月14日
    浏览(58)
  • 微信小程序文件直接上传阿里云OSS

    第一步 配置Bucket跨域访问 第二步 微信小程序配置域名白名单 以上两步,请参考阿里云官网, 如何在微信小程序环境下将文件上传到OSS_对象存储 OSS-阿里云 https://help.aliyun.com/document_detail/92883.html 安装依赖 wx-oss-upload 然后创建自己的上传方法,引用 wx-oss-upload  然后在选取文

    2024年02月11日
    浏览(50)
  • 微信小程序同时上传多个文件(wx.uploadFile)

    使用递归有一个问题,如果要上传的东西里,其余参数中有些值只能上传一次,比如日期,在第二次上传的时候会显示此日期已经添加,请勿重复添加,这样就会导致只上传成功第一个文件。 Multipart.min.js提取链接: 链接:提取Multipart.min.js 提取码:xxqd

    2024年02月03日
    浏览(74)
  • uniapp微信小程序 选择聊天记录文件上传

    目录 精简版总结 示例 容易踩的坑 1、页面刷新问题 2、extension问题 单文件 多个文件 PS:files和filePath/name只能二选一组 此处用xlsx文件作实例,选择聊天记录中的xlsx文件上传到指定接口中。 因为某些微信版本extension可能不生效,或者又想要对提交的文件名做校验,建议参考我

    2024年02月09日
    浏览(92)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包