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,一经查实,立即删除!

相关文章

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。 主要刊发公共卫生相关的文章。 研究者可以围绕居民…

推荐系统三十六式学习笔记: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;是…

【康耐视国产案例】智能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;的访问权限。它是一种客户端-服务…

HR人才测评,如何做中层管理人员的素质测评?

中层管理人员是企业中的重要力量&#xff0c;他们是连接高层管理和基层员工的桥梁&#xff0c;对企业的发展至关重要。因此&#xff0c;对中层管理人员的素质测评尤为重要。下面&#xff0c;我将介绍一些HR人才测评的方法和步骤&#xff0c;以帮助企业准确评估中层管理人员的素…

Jenkins从放弃到入门:部署、配置与应用

目录 Jenkins详解 一、Jenkins介绍 1、Jenkins 功能 2、Jenkins 概念 3、Jenkins 目的 4、Jenkins 特性 5、产品发布流程 二、Jenkins CI/CD 流程 三、部署Jenkins git 1、jenkins 安装 yum 安装 jenkins *jenkins 依赖 java 环境 #注意2.346之后的版本不再支持jdk…

RabbitMQ-发布/订阅模式

1、发布/订阅模式介绍 在普通的生产者、消费者模式&#xff0c;rabbitmq会将消息依次传递给每一个消费者&#xff0c;一个worker一个&#xff0c;平均分配&#xff0c;这就是Round-robin调度方式&#xff0c;为了实现更加复杂的调度&#xff0c;我们就需要使用发布/订阅的方式…

EXSI虚拟机新增磁盘并将空间扩充到已有分区

这里写自定义目录标题 1、在EXSI虚拟机中新增一块磁盘配置大小2、确认新磁盘3、格式化新分区4、添加新分区到LVM5、将新增分区添加到已有分区里 1、在EXSI虚拟机中新增一块磁盘配置大小 注意事项&#xff1a; (1)需确保虚拟机已关闭活处于维护模式&#xff0c;避免数据丢失 (2…

Spring Boot详解:深入了解与实践

文章目录 1. Spring Boot简介1.1 什么是Spring Boot&#xff1f;1.2 Spring Boot的历史背景1.3 Spring Boot的核心特点 2. Spring Boot的核心概念2.1 自动配置2.1.1 自动配置原理2.1.2 自定义配置 2.2 Spring Boot Starter2.3 Spring Boot CLI 3. Spring Boot的主要功能模块3.1…