微信小程序实现云开发上传文件、图片功能

目录
  • 一、前言
  • 二、功能简介
    • 1、选择微信聊天记录中的文件
    • 2、选择本地相册/拍照图片
    • 3、上传功能
  • 三、实现代码
    • 1、选择聊天文件函数(js)
    • 2、选择相册函数(js)
    • 3、上传文件函数(js)
    • 4、调用示例
      • 4-1、云存储新建文件夹
      • 4-2、完整调用代码
      • 4-3、实现效果
  • 四、结语

一、前言

今天的博客所实现的功能很简单,但是也很常用。

本文将这常用的代码进行了封装,可以放入自己utils类中使用,加快开发速度。

实现的功能有两个:

一、选择微信聊天文件并上传。

二、选择本地相册/拍摄图片上传。

当然,看标题就知道是基于云开发的环境之下实现的了。

话不多说,进入正文。

二、功能简介

1、选择微信聊天记录中的文件

有时候小程序的使用场景是需要用户上传手机的文件,特别是excel、word、PDF等类型的文件。如果选择让用户从本地文件夹里面去找,显然有点困难。当然,不仅仅只能选择文件,还可以选择视频、图片类型。具体的可以看官方的开发文档。

因此小程序提供了一个API(wx.chooseMessageFile()),可以让用户从聊天记录中选择文件并上传。
这样选择文件就方便很多了,例如:可以在文件传输助手中选择。

API介绍文档

2、选择本地相册/拍照图片

选择相册图片/拍摄图片上传这个功能就更加常用了。小程序提供实现的API是 wx.chooseImage()。
至于使用场景就不用多说了,很多场景都需要实现这一功能。这里就不做过多介绍,直接塞文档了。具体的介绍,同学们可以前往官方文档查看。

API介绍文档

3、上传功能

前面说了,本文将这几个实现函数都进行了封装,因此选择文件、选择图片、上传三个功能是拆分出来的,降低了代码的耦合性和复用性。

在云开发中,文件上传的API与传统服务器开发中的文件上传API很像。

云开发:wx.cloud.uploadFile() API介绍文档

服务器:wx.uploadFile()API介绍文档

三、实现代码

1、选择聊天文件函数(js)

/**
 * 从聊天记录选择文件
 * @param {number} count 可选择数量(1-100)
 * @param {string} type 可选择文件类型 all:全部类型 video: 仅视频 image: 仅图片 file: 除了视频、图片外的文件类型
 */
  chooseMessageFile(count, type) {
    return new Promise((resolve, reject) => {
      wx.chooseMessageFile({
        count: count,
        type: type,
        success(res) {
          resolve(res)
        },
        fail(err) {
          console.log("选择文件错误 =====>", err)
          resolve(false)
        }
      })
    })
  },

2、选择相册函数(js)

  /** 选择图片封装函数
   * @param count 照片数量
   * @param sizeType 照片的质量, 默认 ['original', 'compressed']
   * @param sourceType 照片来源, 默认 ['album', 'camera']
   */
  chooseImg(count, sizeType, sourceType) {
    if (!count) count = 1
    if (!sizeType) sizeType = ['original', 'compressed']
    if (!sourceType) sourceType = ['album', 'camera']
    return new Promise((resolve, reject) => {
      wx.chooseImage({
        count: count,
        sizeType: sizeType,
        sourceType: sourceType,
        success(res) {
          resolve(res)
        },
        fail(err) {
          resolve(false)
          console.error("===== 选取照片失败 =====", err)
        }
      })
    })
  },

3、上传文件函数(js)

  /**
   * 上传文件封装函数, 文件名随机性处理,由17位随机字符+13位时间戳组成
   * @param {string} filePath 要上传图片的临时路径
   * @param {string} cloudPathPrefix 云数据库存储位置的文件路径前缀
   */
  upLoadFile(filePath, cloudPathPrefix) {
    // 取随机名
    let str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let randomStr = '';
    for (let i = 17; i > 0; --i) {
      randomStr += str[Math.floor(Math.random() * str.length)];
    }
    randomStr += new Date().getTime()

    return new Promise((resolve, reject) => {
      let suffix = /\.\w+$/.exec(filePath)[0] //正则表达式返回文件的扩展名
      let cloudPath = cloudPathPrefix + '/' + randomStr + suffix
      wx.cloud.uploadFile({
        cloudPath: cloudPath,
        filePath: filePath,
        success(res) {
          resolve(res)
        },
        fail(err) {
          resolve(false)
          console.error("===== 上传文件失败 =====", err)
        },
      })
    })
  },

4、调用示例

4-1、云存储新建文件夹

4-2、完整调用代码

WXML代码

<button type="primary" style="margin-top: 105rpx;" bindtap="uploadFileTap" data-type="file">上传文件</button>
<button type="primary" style="margin-top: 45rpx;" bindtap="uploadFileTap" data-type="img">上传图片</button>

JS代码

// pages/uploadFile/uploadFile.js
Page({

  /**
   * 页面的初始数据
   */
  data: {},

  /** 上传按钮点击监听 */
  async uploadFileTap(res) {
    // 上传类型
    const type = res.currentTarget.dataset.type
    let filePathObj = null
    let filePathList = []

    if (type == 'file') {
      filePathObj = await this.chooseMessageFile(1, 'file')
      if (!filePathObj) return
      filePathList.push(filePathObj.tempFiles[0].path)
    } else if (type == 'img') {
      filePathObj = await this.chooseImg(2)
      if (!filePathObj) return
      filePathList = filePathObj.tempFilePaths
    } else {
      return
    }

    console.log("选择文件信息 ====>", filePathObj)

    let cloudPathList = []

    for (let i = 0; i < filePathList.length; i++) {
      const cloudPathObj = await this.upLoadFile(filePathList[i], 'file')
      if (!cloudPathObj) {
        continue
      }
      console.log(filePathList[i], "文件上传成功=====>", cloudPathObj)
      cloudPathList.push(cloudPathObj.fileID)
    }

    console.log("最终返回云文件ID列表 =====>", cloudPathList)

  },

  /**
   * 从聊天记录选择文件
   * @param {number} count 可选择数量(1-100)
   * @param {string} type 可选择文件类型 all:全部类型 video: 仅视频 image: 仅图片 file: 除了视频、图片外的文件类型
   */
  chooseMessageFile(count, type) {
    return new Promise((resolve, reject) => {
      wx.chooseMessageFile({
        count: count,
        type: type,
        success(res) {
          resolve(res)
        },
        fail(err) {
          console.log("选择文件错误 =====>", err)
          resolve(false)
        }
      })
    })
  },

  /** 选择图片封装函数
   * @param count 照片数量
   * @param sizeType 照片的质量, 默认 ['original', 'compressed']
   * @param sourceType 照片来源, 默认 ['album', 'camera']
   */
  chooseImg(count, sizeType, sourceType) {
    if (!count) count = 1
    if (!sizeType) sizeType = ['original', 'compressed']
    if (!sourceType) sourceType = ['album', 'camera']
    return new Promise((resolve, reject) => {
      wx.chooseImage({
        count: count,
        sizeType: sizeType,
        sourceType: sourceType,
        success(res) {
          resolve(res)
        },
        fail(err) {
          resolve(false)
          console.error("===== 选取照片失败 =====", err)
        }
      })
    })
  },

  /**
   * 上传文件封装函数, 文件名随机性处理,由17位随机字符+13位时间戳组成
   * @param {string} filePath 要上传图片的临时路径
   * @param {string} cloudPathPrefix 云数据库存储文件路径前缀
   */
  upLoadFile(filePath, cloudPathPrefix) {
    // 取随机名
    let str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let randomStr = '';
    for (let i = 17; i > 0; --i) {
      randomStr += str[Math.floor(Math.random() * str.length)];
    }
    randomStr += new Date().getTime()

    return new Promise((resolve, reject) => {
      let suffix = /\.\w+$/.exec(filePath)[0] //正则表达式返回文件的扩展名
      let cloudPath = cloudPathPrefix + '/' + randomStr + suffix
      wx.cloud.uploadFile({
        cloudPath: cloudPath,
        filePath: filePath,
        success(res) {
          resolve(res)
        },
        fail(err) {
          resolve(false)
          console.error("===== 上传文件失败 =====", err)
        },
      })
    })
  },
})

4-3、实现效果

上传成功

将文件或图片上传成功后,会返回存储文件的fileID链接。将这个链接以及相关的信息存入数据库即可,当需要读取的时候,从数据库读取,并将链接赋值给Image即可将图片显示出来。

四、结语

实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。

到此这篇关于微信小程序实现云开发上传文件、图片功能的文章就介绍到这了,更多相关微信小程序云开发上传文件图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序云开发详细教程

    微信小程序云开发之初体验,供大家参考,具体内容如下 小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:既可在小程序前端操作,也能在云函数中读写的 JSON 数据库,免费2G容量 存储:可在小程序前端上传/下载云端文件,在云开发控制台可视化管理,免费5G容量 上手体验 打开微信开发者工具,新建

  • 微信小程序实现文件、图片上传功能

    本文实例为大家分享了微信小程序实现文件图片上传的具体代码,供大家参考,具体内容如下 在我看来微信小程序的功能挺强大的,提供了很多API让你直接使用. 这里我说一下微信小程序如何实现图片的上传 1.在微信公众号平台设置uploadFile合法域名 点击设置-开发设置,可以看到服务器域名,点击修改,设置一下你的uploadFile合法域名. 否则会出现以下错误. 2.使用wx.chooseImage和wx.uploadFile实现图片上传 代码如下 wx.chooseImage({ count: 1

  • 微信小程序-拍照或选择图片并上传文件

    微信小程序-拍照或选择图片并上传文件 调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject 上传文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html 主要js代码: choice: function () { var that = this wx.choose

  • 微信小程序云开发之新手环境配置

    本文实例为大家分享了微信小程序云开发环境配置的具体方法,供大家参考,具体内容如下 注意:小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能. 首先我们新建小程序项目,填写申请的appID如果没有需要注册一个,微信为我们提供了一个云开发快速启动的模板,这里我们勾选进去看看云开发为我们提供的案例. 首次进入控制台会报cloud init error (云初始化错误). 如果我们填写了在微信的左上角调试器旁边有一个云开发,在这里我们点击云开发 点击开通云开发 官网建议我们建两

  • 微信小程序云开发使用方法新手初体验

    今天看到微信推送了一条小程序云上线通知,作为一个前端er,满怀期待的去看了看,很不错先看看文档上怎么说的: 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力,6的一匹. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥.(就是说以后老板让你做小程序,连个后台的人都不用给你配了,自己搞定就行了). 目前提供三大基础能力支持: 云

  • 微信小程序云开发(数据库)详解

    开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥. 目前提供三大基础能力支持: 1.云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 2.数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库 3.存储:在小程序前端直接上传/下

  • 微信小程序实现一张或多张图片上传(云开发)

    一.简介: 这篇文章向大家展示的是把图片上传到云数据库中,这是我做商城项目时研究的.大家都知道,云开发是没有后端开发的,所有图片我们要放到云数据库中. 二.素材图: : 三.效果图: 四.代码: wxml: <!--miniprogram/pages/fb/fb.wxml--> <view class='pages'> <view class='top'><text class='top_name'>商品图片:</text></view&g

  • 微信小程序实现云开发上传文件、图片功能

    目录 一.前言 二.功能简介 1.选择微信聊天记录中的文件 2.选择本地相册/拍照图片 3.上传功能 三.实现代码 1.选择聊天文件函数(js) 2.选择相册函数(js) 3.上传文件函数(js) 4.调用示例 4-1.云存储新建文件夹 4-2.完整调用代码 4-3.实现效果 四.结语 一.前言 今天的博客所实现的功能很简单,但是也很常用. 本文将这常用的代码进行了封装,可以放入自己utils类中使用,加快开发速度. 实现的功能有两个: 一.选择微信聊天文件并上传. 二.选择本地相册/拍摄图片上

  • 微信小程序 ES6Promise.all批量上传文件实现代码

    微信小程序 ES6Promise.all批量上传文件实现代码 客户端 Page({ onLoad: function() { wx.chooseImage({ count: 9, success: function({ tempFilePaths }) { var promise = Promise.all(tempFilePaths.map((tempFilePath, index) => { return new Promise(function(resolve, reject) { wx.

  • 微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法 微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到. 我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决. 最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用. 当然像又拍云,万象优图这些第三方存储源都可以采用这种思路. 首先是将七牛的https上传域名放进小程序的域名名单中. 这里我使用的是七牛

  • 微信小程序实现多图上传

    本文实例为大家分享了微信小程序实现多图上传的具体代码,供大家参考,具体内容如下 前言 纯属是笔记,复用性太高,前后端封装的上传的多图方法 看一下效果图 index.html <view class="imgs"> <block wx:for="{{ imgs }}" wx:key="{{ index }}"> <view class="img-box"> <image src=&quo

  • 微信小程序实现多张图片上传功能

    本文实例为大家分享了微信小程序实现多张图片上传的具体代码,供大家参考,具体内容如下 Page({ /** * 页面的初始数据 */ data: { pics: [], count: 9, //上传图片最大数量 // showImgUrl: "", //路径拼接,一般上传返回的都是文件名, uploadImgUrl: 'https://xxx/UploadHandler.ashx', //图片的上传的路径 detailPics: [], //上传的结果图片集合 }, selectimag

  • 微信小程序封装多张图片上传api代码实例

    这篇文章主要介绍了微信小程序封装多张图片上传api代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 export default class Upload{ constructor(object) { this.obj = { count:1, sizeType:['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType:['album','camera'], //

  • 微信小程序实现收藏与取消收藏切换图片功能

    wxml界面使用image标签 <image wx:if="{{collected}}" catchtap='onCollectionTap' src='/images/icon/collection.png'></image> <image wx:else src='/images/icon/collection-anti.png' catchtap='onCollectionTap'></image> js文件上的脚本: // pag

  • 微信小程序使用uni-app开发小程序及部分功能实现详解

    目录 一.uni-app 1.简介 2.开发工具 3.新建 uni-app项目 4.把项目运行到微信开发者工具 二.实现tabBar效果 1.创建tabBar页面 2.配置tabBar 三.配置网络请求 1.依照官网提示安装.导入.使用 2.实战 四.uni-app 里面小程序分包 1.创建分包目录 2.在 pages.json 文件中配置 3.创建分包页面 五.公用方法封装 六.搜索功能 1.搜索组件 2.搜索建议实现 3.本地存储 4.过滤器 七.上拉加载.下拉刷新 1.上拉加载 2.下拉刷

  • 微信小程序实现页面导航与传参功能详解

    目录 一.页面导航 概述 分类 声明式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 编程式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 导航传参 声明式导航传参 编程式导航传参 一.页面导航 概述 顾名思义,页面导航指的是页面之间的相互跳转, 而页面传参就是在加载页面时将特定的参数传递过去从而成为该页面的参数. 分类 声明式导航:在页面上声明一个<navigator>导航组件,通过点击该组件实现页面跳转 编程式导航:通过调用小程序专门的导航API,实现页

  • 微信小程序实现bindtap等事件传参

    之前一直以为微信小程序按钮点击事件传参是和web端相同,即在事件中写明所传递的参数即可,但是这样尝试过以后发现小程序的控制台报错,报所写的bindtap中参数错误,之后百度发现,小程序按钮点击这类事件时一般的处理方法是指明元素所在的id,bindtap只是写明函数名,例如,bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e).通过e可以获取所传过来元素的所有信息. 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将

随机推荐