钉钉与微信小程序兼容性--文件上传

菜鸟日记--

已于 2023-07-20 18:12:49 修改

阅读量1.4k

点赞数 1

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

于 2023-06-27 10:58:10 首次发布

本文链接：https://blog.csdn.net/WY66987/article/details/131412076

版权

文章介绍了uni-app在与微信小程序和钉钉开发中的文件选择API差异，并提供了一个跨平台的`chooseFile.js`封装示例，旨在统一不同平台的文件选择接口。在DingChooseFile.vue组件中，展示了如何根据平台调用相应API并处理选择的文件。

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

一、uni-app、微信小程序、钉钉开发相关api的区别

1、uni.chooseFile不支持微信小程序与支付宝小程序

2、wx.chooseMessageFile 可从客户端会话选择文件

支持类型type有：

all	从所有文件选择
video	只能选择视频文件
image	只能选择图片文件
file	可以选择除了图片和视频之外的其它的文件

3、钉钉应用开发没有选择文件api，只有

调用dd.chooseImage从本地相册选择图片；
调用dd.chooseVideo拍摄视频或从手机相册中选视频；
调用dd.uploadAttachmentToDingTalk上传附件到钉盘，或从钉盘选择文件

针对以上三点，对选择文件进行封封装处理

二、代码

choose-file.js

import Vue from 'vue'
// 目前支持两种 wx 和 钉钉
export const chooseFile = async (options) => {
    console.log(options,'......')
    let _fn
    // #ifdef MP-WEIXIN
    _fn = () => new Promise((reslove, reject) => {
        wx.chooseMessageFile({
            count: 1,
            type: 'file',
            success: reslove,
            fail: reject,
            ...options
        })
    })
    // #endif

    // #ifdef MP-ALIPAY

    const instance = Vue.prototype.$initDingFileChoose({
        onSelect: options.onSelect || (() => {}),
        ...options
    })
    _fn = () => new Promise((reslove, reject) => {
        instance.show()
    })
    
    // #endif   
    await _fn()
}

DingChooseFile.vue

<template>
  <popup
    title="选择文件"
    v-model="visible"
    :clickMaskToClose="true"
    @cancelFn="visible = false"
  >
    <view class="optionsContent" slot="content">
      <view v-for="selectType in types" :key="selectType.value">
        <view
          class="optionItem"
          @tap="onSelect(selectType)"
          v-if="chooseType(selectType.value)"
        >
          <view class="paddingArea">
            <view class="optionValue">{
  { selectType.name }}</view>
            &l

最低0.47元/天解锁文章