Uniapp开发钉钉小程序之图片上传功能

最新推荐文章于 2024-05-06 11:27:19 发布
最新推荐文章于 2024-05-06 11:27:19 发布
阅读量1.5k 收藏 5
点赞数 1
文章标签： 小程序 uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hwyll/article/details/119863626
版权

Uniapp开发钉钉小程序之图片上传功能

前言

由于插件市场提供的图片选择上传组件无法兼容钉钉小程序，所以我们就要使用原生方法手写一个。

一、图片选择上传

  1. 选择图片并上传功能是很多小程序都需要的，效果图如下所示！
    在这里插入图片描述

  2. 我们查阅官方文档，发现有这样一个属性！
    在这里插入图片描述

  3. 其次，我们想要把选择好的照片显示在屏幕上，那么我们就要遍历照片数组！
    在这里插入图片描述

  4. 接下来是方法，这里要注意一下箭头函数和普通函数this的指代问题！
    在这里插入图片描述
    我这边使用的是箭头函数，如果用一般函数就要用var that = this; that.imgArr=…

  5. 九宫格显示
    在这里插入图片描述

好啦，本次分享就到这里，不见不散！

vanillaSup
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
钉钉小程序点击上传图片
qq_36566924的博客
08-21 7858
dd.chooseImage({ //请求图片 count: 1, //上传图片张数限制 success: (res) => { console.log("返回的文件信息为:"); console.log(res); var filePaths = res.filePaths; dd.getAuthCode({ success: function(res) { conso...
uniapp开发微信小程序-人脸采集功能
05-16
uniapp开发微信小程序-人脸采集功能
那些年我们一起踩过的坑（二）关于uniapp开发钉钉小程序真机和模拟器传输的数据格式不同以及一些注意事项
01-08
首先，祝各位帅哥美女青年节快乐，五一假期快乐，生活棒棒的！今天来分享一下关于uniapp开发钉钉小程序真机和模拟器传输的数据格式不同以及一些注意事项。 前些日子我遇到一个问题，钉钉模拟器上能显示数据，真机上却不能显示数据，小程序我已经开发了好几个，但是都是在小程序编辑器的上开发的。为了一个项目多平台使用，我使用uniapp开发。也算是第一次尝鲜。我的服务端是用.netwebapi,前端是uniapp (vue语法）。这里我先插入一下uniapp的请求规范，钉钉的请求规范。请看下面图片： 原创文章 3获赞 14访问量 1106
uniapp关于支付宝小程序或钉钉小程序标题栏自定义.txt
12-30
uniapp关于支付宝小程序或钉钉小程序标题栏自定义
uniapp图片上传，uniapp视频上传，uniapp附件上传，uniapp上传文件、uniapp文件上传组件
m0_50427485的博客
02-11 1866
uniapp图片上传，uniapp视频上传，uniapp附件上传，uniapp上传文件、uniapp文件上传组件，uniapp组件开发
【钉钉小程序拍照+水印+保存本地+上传服务器】
Un_YUI的博客
06-15 772
钉钉小程序拍照+水印+保存本地+上传服务器。
封装uniapp原生图片上传组件和文件上传组件
wendy_qx的博客
04-05 2317
【代码】封装uniapp原生图片上传组件和文件上传组件。
钉钉与微信小程序兼容性--文件上传
WY66987的博客
06-27 911
钉钉上传文件和微信小程序上传文件的兼容性处理
小程序组件封装-上传图片组件封装
weixin_46208395的博客
05-31 439
1.项目需要很多个图片上传然后为了节省代码，就把他封起来了 首先看一下效果-上传后的样子，和没有上传的样子 **1. 配置自定义组件 首先在app.js同级新建一个components的文件夹，放我们的公共组件 ** 我们在components文件夹里面新建一个 pictureUpload 的文件，自动生成页面 然后wxml <van-uploader bind:after-read="afterRead"> <view class="pictureUpload"> &l
uniapp 图片上传使用 后端为file流
u013141712的专栏
03-29 1608
【代码】uniapp 图片上传使用 后端为file流。
uniapp开发的考试答题类小程序.zip
11-25
uniapp开发的考试答题类小程序,有单选 多选 判断三种模板，可以上一题、下一题，没有交卷，模板不与后台交互，数据是写死的，可供学习设计参考。
使用 UniApp 实现小程序的微信登录功能
10-15
主要介绍了使用 UniApp 实现小程序的微信登录功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
uni小程序中上传与下载文件或图片(兼容小程序H5)
2301_76742166的博客
09-04 1711
uni小程序中上传与下载文件或图片(兼容小程序H5)
uniapp初体验———uView组件库的使用与钉钉小程序的运行
YX0711的博客
04-01 1610
uniapp初学者踩坑分享
uniapp小程序实现上传图片功能，并显示上传进度
m0_47791238的博客
08-17 3662
通过uni.chooseMedia方法选择本地图片；使用uni.uploadFile(OBJECT)方法上传文件；使用progress进度条组件，实现上传进度显示
钉钉小程序、文件上传（excel、ppt、word等）
qq_43258522的博客
09-15 1506
其余的是兼容图片上传和PC端上传的文件，这里提一嘴，如果是PC端上传到自己服务器的文件要想在小程序里显示，需要后端把服务器的文件先传到钉盘，前端再通过钉盘下载，如果是小程序里的文件要在PC端系统显示，需要后端先从钉盘上传到自己的服务器，前端再从自己的服务器下载（PC端指的是其它web系统）如果需要反显，上传文件后需要把返回的结果存在数据库里（需要后端配合实现），然后从后端服务器取出结果，最后通过dd.previewFileInDingTalk进行预览。希望这篇文章对你有帮助！
h5+js调取相机做取景框_uni-app 2.2发布，大幅优化H5端性能体验
weixin_39616961的博客
11-24 755
背景uni-app发布以来，已经服务了几十万开发者。让我们意外，或者说惊喜的是，有大量开发者用uni-app只编写H5版，并没有多端发布（可参考案例）。这其实也符合uni-app的初衷，uni-app的定位并不是需要多端发布时才用uni-app。uni-app是一个使用vue.js开发所有前端应用的统一框架。对于一个前端工程师来说，使用uni-app做多端效率更高，做单一端也没问题，并在各端有不少...
基于家政小程序的个性化家政服务研究
最新发布
2402_83689311的博客
05-06 418
基于家政小程序的个性化家政服务研究，是近年来随着移动互联网技术的快速发展和人们生活品质的提高而兴起的一个热门话题。以下是对该领域的研究探讨： 一、引言 随着现代生活节奏的加快，家政服务已成为越来越多家庭不可或缺的一部分。然而，传统的家政服务模式存在着服务质量参差不齐、价格不透明、预约不便等问题。为了解决这些问题，基于家政小程序的个性化家政服务应运而生。该服务模式通过利用移动互联网技术，实现了家政服务的精准匹配、实时互动和数据驱动，为用户提供了更加便捷、高效、贴心的家政服务体验。 二、个性化家政服务
钉钉 h5小程序页面 使用自定义标题
09-08
钉钉 H5小程序页面可以使用自定义标题来实现个性化的页面显示效果。在钉钉 H5小程序页面中，我们可以通过以下步骤来实现自定义标题： 1. 在小程序页面的`JSON`配置文件中，找到`navigationBarTitleText`字段，将其值设为我们想要显示的自定义标题文本。例如，我们可以将其设置为"我的钉钉"。 2. 在对应的小程序页面的`WXML`文件中，添加`<view>`标签，并在其中插入我们设定的自定义标题文本，例如`<view>我的钉钉</view>`。 3. 在页面的`JS`文件中，如果需要在标题栏中显示返回按钮，则可以使用`dd.setNavigationBar`方法，将`title:`字段设置为我们设定的自定义标题文本，例如： ``` dd.setNavigationBar({ title: '我的钉钉' }) ``` 以上步骤完成后，我们的钉钉 H5小程序页面就会显示我们所设定的自定义标题，例如"我的钉钉"。同时，如果需要在标题栏中显示返回按钮，也可以通过`dd.setNavigationBar`方法进行设置。 需要注意的是，钉钉 H5小程序的自定义标题功能可能受到企业和个人设置的限制，具体可根据实际情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值