uniapp实现图片上传——支持APP、微信小程序

uniapp实现图片、视频上传

文章目录

    • uniapp实现图片、视频上传
      • 效果图
      • 组件
        • template
        • js
      • 使用

相关文档:

  • 结合 uView 插件 + uni.uploadFile 实现
    u-upload
    uploadfile

效果图

在这里插入图片描述


组件

  • 简单封装,还有很多属性…,自定义样式等…根据个人所需调整
template
<template><view><u-upload:fileList="fileList"@afterRead="afterRead"@delete="deletePic"name="files":maxCount="maxCount":multiple="multiple":width="width":height="height":previewFullImage="previewFullImage":accept="accept"></u-upload></view>
</template>

js
  • toast 方法,修改为自己即可;
<script>export default {name:"uploadFile",props: {width: {type: Number,default: 60},height: {type: Number,default: 60},maxCount: { // 限制上传数量type: Number,default: 1},multiple: { // 是否开启图片多选type: Boolean,default: false},list: { // 图片列表type: Array,default: []},previewFullImage: { // 文件预览type: Boolean,default: true},accept: { // 上传类型 all | media | image | file | videotype: String,default: image}},data() {return {fileList: []};},mounted() {this.fileList = this.list;},methods: {/*** 删除图片* @param {Object} event*/deletePic(event) {this.fileList.splice(event.index, 1)},/*** 读取后的处理函数* @param {Object} event*/async afterRead(event) {let lists = [].concat(event.file)let fileListLen =this.fileList.lengthlists.map((item) => {this.fileList.push({...item,status: 'uploading',message: '上传中...'})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)this.$util.showToast('上传成功');let item = this.fileList[fileListLen]this.fileList.splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result.imgUrl}))fileListLen++}},/*** 上传图片* @param {Object} url*/uploadFilePromise(url) {return new Promise((resolve, reject) => {uni.uploadFile({url: `服务器 url xxxx`,filePath: url,name: 'file', // 文件对应的 keyheader: {// 根据个人所需,是否要登录// Authorization: `Bearer ${ getToken() }`},success: (res) => {// 接口返回数据,自行修改let datas = JSON.parse(res.data);if (datas.code != 200) {this.$util.showToast(datas.msg);reject(res);return;}setTimeout(() => {resolve(datas.data)}, 1000)},fail: (res) => {reject(res);}});})}}}
</script><style></style>

使用

<view><uploadFile :list="imgList"></uploadFile>
</view>

import uploadFile from '@/components/uploadFile/uploadFile.vue'export default {components: {uploadFile},data() {return {imgList: [{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg' }] // test 根据业务处理}}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/19732.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx在Docker中的应用:容器化部署与扩展

在当今的云计算和微服务时代&#xff0c;Docker容器技术因其轻量级、可移植性和可扩展性而受到广泛关注。Nginx&#xff0c;作为一个高性能的HTTP和反向代理服务器&#xff0c;也在Docker中找到了其广泛的应用场景。本文将探讨Nginx在Docker中的容器化部署和扩展策略&#xff0…

16:00面试,16:08就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到8月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…

【C语言】常见的动态内存的错误

前言 在动态内存函数的使用过程中我们可能会遇到一些错误&#xff0c;这里将常见的错误进行总结。 对NULL解引用 请看以下代码&#xff1a; 可以看到&#xff0c;这时我们的malloc开辟是失败的&#xff0c;所以返回的是空指针NULL&#xff0c;而我们却没有进行检查&#xff0…

推荐:4本易发表的优质SSCI期刊,含期刊官网!

01、Risk Management and Healthcare Policy 开源四区&#xff0c;国人发表占比25%&#xff0c;发表量前三的国家分别是中国、埃塞俄比亚和美国。 该期刊对国人友好&#xff0c;年度发文量400多&#xff0c;影响因子3.6。 主要刊发公共卫生相关的文章。 研究者可以围绕居民…

【C++ C#】 C++ 和C# 的混合项目,C++ 文件中有多个 函数和变量 定义了未使用,会影响程序正常执速度吗?

文章目录 1 未使用的函数和变量 是否会影响速度分析1.1 C 未使用的函数和变量&#xff1a;1.2 C# 未使用的函数和变量&#xff1a; 2 影响程序执行速度的其他因素3 如何处理未使用的代码 一个 C 和C# 的混合项目&#xff0c;C 文件中有多个 函数和变量 定义了未使用&#xff0c…

推荐系统三十六式学习笔记:01|你真的需要个性化推荐系统吗?

目录 什么是推荐系统你需要推荐系统吗总结 什么是推荐系统 让我们来换一个角度回答三个问题&#xff0c;从而重新定义什么是推荐系统: 1、它能做什么&#xff1f; 2、它需要什么&#xff1f; 3、它怎么做。 对于第一个问题“它能做什么”&#xff0c;我的回答是&#xff1a;推…

2020年CSP-J入门级第一轮初赛真题

一、选择题 在内存储器中每个存储单元都被赋予一个唯一的序号&#xff0c;称为&#xff08;&#xff09;。 A.地址 B. 序号 C. 下标 D. 编号 答案&#xff1a;A. 地址 在内存储器中&#xff0c;每个存储单元都有一个唯一的标识&#xff0c;用于区分和访问不同的存储单元。这个唯…

说说你对单例模式的理解?如何实现?

一、是什么 单例模式&#xff08;Singleton Pattern&#xff09;&#xff1a;创建型模式&#xff0c;提供了一种创建对象的最佳方式&#xff0c;这种模式涉及到一个单一的类&#xff0c;该类负责创建自己的对象&#xff0c;同时确保只有单个对象被创建 在应用程序运行期间&am…

day23--单元测试-反射-注解-动态代理

day23-单元测试、反射 恭喜同学们&#xff0c;Java主要的知识我们其实已经学习得差不多了。今天同学们再把单元测试、反射、注解、动态代理学习完。Java的基础知识就算全齐活了。 首先&#xff0c;我们进入单元测试的学习。 一、单元测试 1.1 单元测试快速入门 所谓单元测…

北斗消防系统实现林海无信号应急通信,高效防灾救灾开拓应急救援新通道

最近&#xff0c;贵州多地爆发的重大山火&#xff0c;火势 21日这12天里&#xff0c;贵州发生森林火情221起&#xff0c;当地包括武警、消防、专业救援队伍等在内的9千多人连续扑救&#xff0c;1.5万名基层党员干部、民兵、群众及志愿者协助救火。目前&#xff0c;贵州全省火灾…

OSPF状态机+SPF算法

OSPF状态机 1.点到点网络类型 down-->init-->(前提为可以建立邻接)exstart——>exchange-->若查看邻接的DBD 目录后发现不用进行LSA 直接进入ful。若查看后需要进行查询、应答先进入loading&#xff0c;在查询应答完后再进入 fuIl: 2.MA网络类型 down --&g…

【计算机网络】——概述(图文并茂)

概述 一.信息时代的计算机网络二.互联网概述1.网络&#xff0c;互连网&#xff0c;互联网&#xff08;因特网&#xff09;1.网络2.互连网3.互联网&#xff08;因特网&#xff09; 2.互联网简介1.互联网发展的三个阶段2.互联网服务提供者&#xff08;ISP&#xff09;3.互联网的组…

HTTP/超文本传输协议(Hypertext Transfer Protocol)及HTTP协议通信步骤介绍和请求、响应阶段详解;

目录 一、HTTP/超文本传输协议 特点和功能 请求-响应模型 版本和扩展 安全性和加密 二、HTTP协议通信步骤介绍 三、请求、响应阶段详解 HTTP请求 HTTP响应 示例 一、HTTP/超文本传输协议 HTTP/超文本传输协议&#xff08;Hypertext Transfer Protocol&#xff09;是…

浅谈人机交互

人机交互&#xff08;Human-Computer Interaction&#xff0c;HCI&#xff09;&#xff0c;是指关于设计、评价和实现供人们使用的交互式计算机系统&#xff0c;并围绕相关的主要现象进行研究。 狭义的讲&#xff0c;人机交互技术主要是研究人与计算机之间的信息交换&#xff0…

wpf窗体背景镜像渐变效果实现

<Window.Background> <!--镜像渐变--> <RadialGradientBrush Center"0.5,0" GradientOrigin"0.5,-0.5" RadiusX"0.7" RadiusY"1.2"> <GradientStop Color"#ff61baff" Offset"0&q…

【康耐视国产案例】智能AI相机:深度解析DataMan 380大视野高速AI读码硬实力

随着读码器技术的不断更新迭代&#xff0c;大视野高速应用成为当前工业读码领域的关键发展方向。客户对大视野高速读码器的需求源于其能显著减少生产成本并提升工作效率。然而&#xff0c;大视野应用场景往往伴随着对多个条码的读取需求&#xff0c;这无疑增加了算法的处理负担…

cuda 11.6 pytorch安装

在安装之前&#xff0c;需要先配置GPU环境&#xff08;安装CUDA和CudaNN) 命令行输入nvidia-smi&#xff0c;查看驱动信息 nvidia-smi 安装相应的CUDA 和CUDANN 验证&#xff1a;输入nvcc --version 或者nvcc -V 进行检查 nvcc --version nvcc -V 在anaconda里创建环境 co…

NLP课程笔记-基于transformers的自然语言处理入门

toc 项目地址 https://github.com/datawhalechina/learn-nlp-with-transformers/ 2017年&#xff0c;Attention Is All You Need论文&#xff08;Google Brain&#xff09;首次提出了Transformer模型结构并在机器翻译任务上取得了The State of the Art(SOTA, 最好)的效果。2…

ADB安装教程

1 adb简介 Android 调试桥 (adb) 是一种功能多样的命令行工具&#xff0c;可让您与设备进行通信。 adb命令可用于执行各种设备操作&#xff0c;例如安装和调试应用。 adb 提供对 Unix shell&#xff08;可用来在设备上运行各种命令&#xff09;的访问权限。它是一种客户端-服务…

一篇文章带你弄懂Java集合的泛型

目录 第一问&#xff1a;什么是泛型&#xff1f;有什么好处&#xff1f; 第二问&#xff1a;泛型是如何实现的呢&#xff1f; 第三问&#xff1a;类型擦除的缺点有哪些&#xff1f; 第四问&#xff1a;泛型中上下界限定符extends和super有什么区别&#xff1f; 第五问&…