使用uni-app的框架进行图片或视频的（项目需求可能还有其它非图片和视频的文件，比如ppt的上传）上传

最新推荐文章于 2024-04-16 12:06:15 发布
原创 最新推荐文章于 2024-04-16 12:06:15 发布 · 693 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
uni-app多端开发的使用

当前文章被收录于：

uni-app多端开发的使用
7 篇文章 1 人学习

自己总结的

订阅专栏 查看详情
本文详细介绍了在uni-app中实现图片与视频选择、上传的三步流程：选择文件、上传至服务器并保存信息至数据库。同时提供了关键API uni.chooseImage、uni.chooseMedia 和 uni.uploadFile 的使用说明。

思路

第一步

用uni.chooseImage或 uni.chooseMedia选取图片或视频，成功返回选中的图片或视频的参数信息，包括图片展示的路径（也就是本地图片的路径）、图片大小、图片格式等信息。

第二步

拿到本地的图片或视频的信息之后先用后台提供的上传文件的接口，对接接口之后会返回服务器（也就是线上不是本地的图片信息了）上存在的图片或视频的信息（就可以直接在浏览器输入展示图片或视频了）

注意点

uni-app有专门上传文件的api（uni.uploadFile）需要去看官网了解使用，其它不同的框架估计也是这么个使用方法

第三步

因为要存储上传了的图片或视频信息给后台作为数据库保存起来，所以之后调用后台的另一个接口把需要的图片或视频的对应信息对接接口保存到数据库

uni-app框架其它文件的上传方法

查看官网介绍
https://ask.dcloud.net.cn/article/35547

uni-app视频加图片轮播
qq137056680的博客
07-19 6702
uni-app视频加图片轮播，适用小程序、app、H5欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程...
uniapp上传手机相册图片、视频或拍摄图片、视频上传
tt1234561009的博客
11-23 7739
一开始想用现成组件uView的u-upload来实现，做到一半发现使用这个组件上传图片没有问题，可以满足从相册上传、直接拍摄、预览功能。但是，视频好像不支持预览，不知道是我写法不对还是怎么回事/(ㄒoㄒ)/~~最终图片使用的u-upload组件，视频用了uniapp API 的 uni.chooseVideo()方法。
uniapp小程序APP实现（图片，视频，文件）的本地或者拍摄上传，删除，预览，编辑功能！
睡不醒的博客
08-09 4811
uni-app小程序APP实现（图片，视频，文件）的上传，删除，预览，编辑功能！ uniapp小程序APP实现（图片，视频，文件）的上传，删除，预览，编辑功能！ 本文章包含了如何实现上传，删除，预览，编辑等功能，代码不多，简单实现，分享给像我一样的小白，和踩过坑的同学们。 可以先看一下官网预习一下，不然看了代码可能你也不知道在干嘛，授人以鱼不如授人以渔，希望大家以后都能具备自己实现的能力，官网地址我贴在下面： 上传图片：https://uniapp.dcloud.io/api/media/image 上传视
uni-app - 移动端（iOS&Android）批量上传文件，支持重传、删除、多选，携带参数，进度监控
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
10-07 3974
本文主要针对移动端（iOS和Android)。uni-app官方提供了接口从本地选择选择非媒体文件。如果是图片视频的话，可以选择、、等接口。但是 仅仅支持H5。除了 官方还提供了来选择任意类型的文件上传。但是请注意该组件在移动端仍然仅支持选择图片和视频。那么移动端，想要上传文件，我们该如何操作，按照官方的说法：App端如需选择非媒体文件，可在插件市场搜索文件选择，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。。这里我们选择使用插件：全文件上传选择非原生2.0版在生命
uniapp小程序实现上传图片功能，并显示上传进度
m0_47791238的博客
08-17 7540
通过uni.chooseMedia方法选择本地图片；使用uni.uploadFile(OBJECT)方法上传文件；使用progress进度条组件，实现上传进度显示
uni-app上传图片(选择，预览，删除图片)
阿進在努力~~
03-09 1万+
用uni-app做项目时，上传图片的功能需求应该是在正常不过的了。最近有几个项目都有遇到，所以想总结一下。所用到的api都很简单。 功能需求 功能需求如列表所示，视图展现如图所示，代码如下。点击相框按钮可选择图片上传，点击每一个图片可以进行预览，点击每个图片删除图标可删除对应图片。 本地相册选择图片或使用相机拍照上 可以预览选择上传的图片 删除选错或不选的图片 <!--出错了就自己写，不知道复制粘贴对没有--> <view>图片上传</view> <vie
uni-app实现文件上传、下载、预览（非只图片和视频）
热门推荐
gaoyangbuzai的博客
08-13 2万+
需求 在项目中要求在当前页面上传、下载和预览多种格式文件，需要兼容H5（在app中打开）、Android、IOS、微信小程序，文件类型包含word、excel、ppt、pdf、zip、rar、图片。 上传 第一步，肯定是先去翻uni-app的文档，期望着官方能够上传、下载、预览一条龙的包干了，调调api就行了。然而理想是丰满的，现实是残酷的。 既然要上传文件，那肯定要先选择到文件，先找找选取文件的api吧。看看我找到了什么： uni.chooseImage从本地相册选择图片或使用相机拍照。 input组
uni-app实现图片和视频上传功能
小周sri的码农
10-18 9255
使用uni-app实现点击上传，既可以上传视频，有可以上传图片，图片预览，删除图片和视频功能，最终效果如下。uni-app里面没有提供同时上传视频和图片这个插件，只能靠自己手写， 1.页面布局 通过uni-app提供的标签，进行页面布局，这里就不多讲了，uni-app提供的有这个案例，可以直接把他们的样式拷贝过来修改一下就行。 <view class="uni-upl...
uni-app 微信小程序 实现图片视频多文件上传功能
@必意玲
09-29 6240
1. 实现代码 2. 完整代码 <template> <!-- 上传视频或者图片 --> <view class="up-page"> <!--图片--> <view class="show-box" v-for="(item,index) in imageList" :key="index"> <image class="full" :src="item" :data-src="image" @tap="preview
uni-app上传图片和上传视频
weixin_45459904的博客
08-31 5175
<view style="display: flex; flex-wrap: wrap;"> <!--图片--> <view style="width:550rpx;height:auto;margin:20rpx auto 0;display:flex;justify-content: space-between;flex-wrap: wrap;"> <view v-for="(item,index) in imageList" :key="index"
uni-app系统目录文件上传（非只图片和视频）解决方案
liupan6889的博客
09-22 9181
背景 公司领导提出这样的产品需求：需要上传目录文件，不只是图片和视频，而且同时要支持Android和IOS两大移动端。另外公司App的架构采用的是uni-app。 思考 第一个想到的方案就是，看uni-app框架能否支持。答案可想而知，uni-app组件本身没有提供文件上传组件，不支持<input type="file"/> uni-app App端内置HTML5+引擎，提供plus...
uniapp进行文件的选取和上传
qq_40393313的博客
08-14 2万+
h5端的可以直接使用 <input type="file" accept="" multiple> //accept是用来规定选择文件的类型的，multiple可以用来多选 选到了文件就可以使用formdata添加文件进行上传 接下来是app端的 图片类型的自带的uni.chooseImage(OBJECT)就可以进行多选了 详情看官网地址：https://uniapp.dcloud.io/api/media/image 下面也是官网的demo uni.chooseImage({ co
uni-app App和H5平台上传视频截取视频第一帧生成图片
qying的博客
07-12 9384
uni-app App和H5平台使用renderjs上传视频截取视频第一帧生成图片
uni-app上传图片视频
ZxyCool_1314的博客
08-09 1312
　　html <view class="imgItems"> <view class="grace-file-list" style="padding: 0;margin-bottom: 50upx"> <view class="items" v-for="(item, index) in fastImgLists" :...
Uniapp App(Android)端 非媒体文件的上传与下载
Everglow___的博客
04-16 9622
uniapp，App端，非媒体文件上传，以及下载保存本地的常用方法
uni-app：web-view实现文件（非图片视频文件）上传与下载
weixin_43637545的博客
12-09 6660
在APP最近开发的一个功能模块中，需要实现非图片与视频的文件上传与下载功能，查看了很多资料，也踩了不少坑。现在记录一下，希望可以帮到有需要的同学。 一：上传 首先需要创建一个web-view页面，在pages.json中配置web-view的页面路径为（/pages/exp/web_view），如下： <template> <view> /*web-view中的src...
uniapp文件上传(视频和图片)
peijiajing的博客
10-28 7527
代码看效果，接口改成自己的 <template> <view class="box"> <!-- 实拍视频 --> <view> <view class="fileTitle">实拍视频</view> <view v-if="videoSrc == ''" class="file videoFile" @tap="chooseVideo"> <image style="width:112u
uni-app h5端上传非视频图片文件
qq_42736311的博客
04-29 5603
刚工作一年的小白，最近做的一个项目是用uni-app做一个h5端跟小程序端的关于租房，招聘一类的项目，这个项目没什么难点的，就是h5端的微信支付，分享，后来这些都搞定了，虽然也是花了不少时间，后来马上要交付项目的时候，发现在招聘的地方有个应聘的表单，这个表单让传简历，一般简历都是word文档，我用的uni-app框架，在他的文档里面找如何上传非视频图片文件，发现并没有上传非视频图片文件这一说，有一...
uni-app实现多图片上传
i96249264_bo的博客
07-15 6449
html <!-- 上传图片 --> <view class="Voice_input"> <text class="Voice_title">上传图片:</text> <view class="Image_box"> <div class="box" v-for="(item,index) in totalImg" :key='index'> //选择图片后回显的图片 <
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值