uniapp小程序选择文件并上传到uniCloud

2024-04-28 20:18

本文主要是介绍uniapp小程序选择文件并上传到uniCloud,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

uniapp小程序选择文件并上传到uniCloud

官方文档:https://uniapp.dcloud.io/api/README

主要使用了chooseMessageFile(暂时支持选择聊天记录文件),saveTmpfile,uploadfile这三个API

1、选择文件

chooseFile:function(){let that = this;uni.chooseMessageFile({count: 1,success: res => {//filename是自动获取到的文件名称let filename = res.tempFiles[0].name,//获取到的文件路径filePath = res.tempFiles[0].path,houzhuiming = that.getHouzhui(filePath,'.');//获取上传文件后缀名//保存filenamethat.filename = filename;//通过后缀名判断文件类型if(['jpg','png','jpeg'].indexOf(houzhuiming) != -1){//如果是图片直接将filepath赋值给img绑定为图片的src,可以在页面上展示·that.img = filePath;//预览图片uni.previewImage({//对选中的图片进行预览urls: filePath,})}else{//不是图片的话,将准备好的图片展示出来that.img = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b06b1ef6-bb41-4224-9b73-8d3e34b7ed2f/a3ab7bba-3522-4244-98fa-d9f770407582.png';}//保存临时文件,需要保存为临时文件,后面才可以上传到unicloud,不然图片的临时路径会失效that.saveTmpfile(filePath);}})
}

2、保存临时文件

//保存临时文件
saveTmpfile: function(filepath){let that = this;uni.saveFile({tempFilePath: filepath,success: function (res) {//保存后的文件路径var savedFilePath = res.savedFilePath;that.savedFilePath = savedFilePath;}});
},

3、上传文件到unicloud

//上传文件到云存储空间
uploadfile: function(filePath,name){//显示加载弹窗uni.showLoading({mask:true,title:'正在上传文件,请稍等……'})// promise方式const result = uniCloud.uploadFile({filePath: filePath,cloudPath: name,onUploadProgress: function(progressEvent) {console.log(progressEvent);var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);}}).then(res => {uni.hideLoading();uni.showToast({title:"上传成功",duration:1000})});
},

这篇关于uniapp小程序选择文件并上传到uniCloud的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/944166

相关文章

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T

基于Python实现多语言朗读与单词选择测验

《基于Python实现多语言朗读与单词选择测验》在数字化教育日益普及的今天,开发一款能够支持多语言朗读和单词选择测验的程序,对于语言学习者来说无疑是一个巨大的福音,下面我们就来用Python实现一个这... 目录一、项目概述二、环境准备三、实现朗读功能四、实现单词选择测验五、创建图形用户界面六、运行程序七、

前端知识点之Javascript选择输入框confirm用法

《前端知识点之Javascript选择输入框confirm用法》:本文主要介绍JavaScript中的confirm方法的基本用法、功能特点、注意事项及常见用途,文中通过代码介绍的非常详细,对大家... 目录1. 基本用法2. 功能特点①阻塞行为:confirm 对话框会阻塞脚本的执行,直到用户作出选择。②

将java程序打包成可执行文件的实现方式

《将java程序打包成可执行文件的实现方式》本文介绍了将Java程序打包成可执行文件的三种方法:手动打包(将编译后的代码及JRE运行环境一起打包),使用第三方打包工具(如Launch4j)和JDK自带... 目录1.问题提出2.如何将Java程序打包成可执行文件2.1将编译后的代码及jre运行环境一起打包2

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

Python 中 requests 与 aiohttp 在实际项目中的选择策略详解

《Python中requests与aiohttp在实际项目中的选择策略详解》本文主要介绍了Python爬虫开发中常用的两个库requests和aiohttp的使用方法及其区别,通过实际项目案... 目录一、requests 库二、aiohttp 库三、requests 和 aiohttp 的比较四、requ

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

如何选择适合孤独症兄妹的学校?

在探索适合孤独症儿童教育的道路上,每一位家长都面临着前所未有的挑战与抉择。当这份责任落在拥有孤独症兄妹的家庭肩上时,选择一所能够同时满足两个孩子特殊需求的学校,更显得尤为关键。本文将探讨如何为这样的家庭做出明智的选择,并介绍星贝育园自闭症儿童寄宿制学校作为一个值得考虑的选项。 理解孤独症儿童的独特性 孤独症,这一复杂的神经发育障碍,影响着儿童的社交互动、沟通能力以及行为模式。对于拥有孤独症兄

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟 开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚 第一站:海量资源,应有尽有 走进“智听