uniapp 之 图片 视频 文件上传

news2024/7/3 6:39:36

在这里插入图片描述

<view class="" style="padding: 24rpx 0">
				<text>相关资料 <text class="fs-26 color-666">(图片、视频、文档不超过9个)</text> </text>
				<view class="flex align-center" style="margin-top: 17rpx;">
					<u-upload accept="all" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="9">
					</u-upload>
				</view>
			</view>
submit() {
				if (this.fileList1.length) {
					let urls = [];
					this.fileList1.forEach(el => {
						urls.push({
							type: el.types,
							url: el.url,
						})
					});
					this.info.pic = JSON.stringify(urls);
				}
				uni.showModal({
					title: '',
					content: '确认提交?',
					success: res => {
						if (res.confirm) {
							// 创建订单
							this.$http({
								url: "/api",
								data: this.info,
							}).then(res1 => {
								uni.$u.toast('提交成功');
								setTimeout(()=>{
									this.$xf.on('/pages/mine');
								},2000)
								
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					// 接口返回数据
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					if (item.type == "video") {
						item.types = 2;
					} else if (item.type == "image") {
						item.types = 1;
					} else {
						item.types = 3;
					}
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: JSON.parse(result).data.url,
						})
					);
					fileListLen++;
				}
				console.log(this.fileList1);
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: getApp().globalData.baseURL + "/api", // 仅为示例,非真实的接口地址
						filePath: url,
						name: "file",
						header: {
							"Authorization": uni.getStorageSync("token")
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data);
							}, 500);
						},
					});
				});
			},

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

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

相关文章

CNN 卷积神经网络之 DenseNet 网络的分类统一项目(包含自定义数据集的获取)

1. DenseNet 网络介绍 本章实现的项目是DenseNet 网络对花数据集的五分类&#xff0c;下载链接&#xff1a; 基于迁移学习的 DenseNet 图像分类项目 DenseNet 网络是在 ResNet 网络上的改进&#xff0c;大概的网络结构如下&#xff1a; 1.1 卷积的简单介绍 图像识别任务主要…

通过 RIOT 将 AWS ElastiCache 迁移到阿里云 Tair

本文通过示例介绍了 RIOT 如何轻松地将数据从 AWS ElastiCache 迁移到云原生内存数据库&#xff08;如 Tair 和云数据库 Redis 版&#xff09;。 1. 准备资源迁移 1.1. 源代码 AWS ElastiCache cache.r6g.xlarge。它有三个数据分片&#xff0c;与 Redis 6.2 兼容。 AWS EC2 t2.…

共建开源新里程:北京航空航天大学OpenHarmony技术俱乐部正式揭牌成立

12月11日,由OpenAtom OpenHarmony(以下简称“OpenHarmony”)项目群技术指导委员会(以下简称“TSC”)和北京航空航天大学共同举办的“OpenHarmony软件工程研讨会暨北京航空航天大学OpenHarmony技术俱乐部成立仪式”在京圆满落幕。 现场大合影 活动当天,多位重量级嘉宾出席了此次…

2023.12.14 hive sql的聚合增强函数 grouping set

目录 1.建库建表 2.需求 3.使用union all来完成需求 4.聚合函数增强 grouping set 5.聚合增强函数cube ,rollup 6.rollup翻滚 7.聚合函数增强 -- grouping判断 1.建库建表 -- 建库 create database if not exists test; use test; -- 建表 create table test.t_cookie(month …

理解 Proxy 和 Object.defineProperty:提升你的 JavaScript 技能(下)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

华为配置基本QinQ示例

组网需求 如图1所示&#xff0c;网络中有两个企业&#xff0c;企业1有两个分支&#xff0c;企业2有两个分支。这两个企业的各办公地的企业网都分别和运营商网络中的SwitchA和SwitchB相连&#xff0c;且公网中存在其它厂商设备&#xff0c;其外层VLAN Tag的TPID值为0x9100。 现…

ffmpeg编解码——数据包(packet)概念(如何正确处理数据包中的显示时间戳pts与解码时间戳dts关系?)

文章目录 FFmpeg编解码——数据包&#xff08;Packet&#xff09;概念1. 数据包&#xff08;Packet&#xff09;简介2. 数据包&#xff08;Packet&#xff09;在FFmpeg中的应用2.1 从媒体文件读取数据包2.2 向媒体文件写入数据包 3. 数据包&#xff08;Packet&#xff09;相关问…

智能优化算法应用:基于鸽群算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于鸽群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于鸽群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.鸽群算法4.实验参数设定5.算法结果6.参考文献7.MA…

数据结构-06-散列/哈希表

1-什么是散列表 散列表用的是数组支持按照下标随机访问数据的特性&#xff0c;所以散列表其实就是数组的一种扩展&#xff0c;由数组演化而来。可以说&#xff0c;如果没有数组&#xff0c;就没有散列表。散列表中的元素在数组的位置(index)是通过散列函数得到的。 2-散…

C语言 联合体验证 主机字节序 +枚举

联合体应用&#xff1a;验证当前主机的大小端&#xff08;字节序&#xff09; //验证当前主机的大小端 #include <stdio.h>union MyData {unsigned int data;struct{unsigned char byte0;unsigned char byte1;unsigned char byte2;unsigned char byte3;}byte; };int main…

华为OD机试-传递悄悄话(JavaPythonGo)100%通过率

题意 给定一个二叉树,每个节点上站着一个人,节点数字表示父节点到该节点传递悄悄话需要花费的时间。初始时,根节点所在位置的人有一个悄悄话想要传递给其他人,求二又树所有节点上的人都接收到悄悄话花费的时间。 输入 给定一叉树 09 20-1-1 157-1-1-1-132 注:-1表示空节…

Redis使用——低版本不支持SSUBSCRIBE问题的解决 守护线程daemonize初步

前言 最近在使用redis的使用&#xff0c;报了一个错&#xff0c;ERR unknown command SSUBSCRIBE&#xff0c;后来发现是redis版本的问题。这个似乎是redis的发布订阅模式相关的配置。 目录 前言引出低版本不支持SSUBSCRIBE报错unknown command SSUBSCRIBE检查docker版本拉取指…

薅github的羊毛-用pages建自己的博客或资源站 - 博客工具 - 2/2

笔者调研了好多个静态博客工具&#xff0c;最后锁定Hexo了&#xff0c;但不等于其他博客不行。我只吐槽两个 Hugo - 难用Gridea - 简直就是骗钱的&#xff0c;我交钱用不了 theme没有链接&#xff0c;同步也同步不了&#xff0c;估计以前是可以&#xff0c;现在经营不下去&…

C语言结构体和位段

自定义类型&#xff1a;结构体及联合和枚举 一.结构体类型的声明1.1 结构体的概念1.2结构的声明1.3特殊的声明1.4结构体的自引用1.5可以使用typedef重命名 二.结构体变量的创建和初始化2.1结构体变量的初始化使用{}2.2初始化&#xff1a;定义变量的同时赋初值。2.3结构体嵌套及…

基于FFmpeg,实现播放器功能

一、客户端选择音视频文件 MainActivity package com.anniljing.ffmpegnative;import android.Manifest; import android.content.ContentResolver; import android.content.Context; import android.content.Intent; import android.database.Cursor; import android.net.Ur…

【python笔记】requests模块基础总结

前言 菜某笔记总结&#xff0c;如有错误请指正。&#xff08;抱歉可能我用渗透的靶场做的功能演示&#xff0c;让单纯想看爬虫整理的朋友不好理解&#xff0c;主要看一下requests库的写法吧&#xff0c;关于sql靶场&#xff0c;文件上传靶场什么的都当做网站的名字吧&#xff…

无法打开源文件“opencv2/opencv.hpp“

如图报错&#xff0c;看见就非常高血压 解决方案&#xff1a; 1.打开项目属性 第二步&#xff0c;注意你如果跑的是Debug&#xff0c;那么你在项目属性里面设置的必须选择Debug模式&#xff0c;跑的Release模式&#xff0c;则你必须要设置相应的Release模式&#xff01;否则你…

【金华模式】双龙旅游引燃露营设计和文旅产融合新方式

&#xff08;中国国际教育电视台 黎明&#xff09;金华双龙风景旅游区位于浙江省金华市北郊的金华山麓&#xff0c;是一处融自然山水、溶洞群景观、科普探险、康体休闲、避暑度假、观光朝圣于一体的景区。旅游区人文积淀深厚&#xff0c;道、儒、释文化兼收并蓄&#xff0c;东汉…

Android Studio的代码笔记--Adapter+GridView学习

AdapterGridView学习 AdapterGridViewSimpleAdapterGridViewactivity_main.xmlappicon.xmlMainActivity 自定义BaseAdapterGridView已下载应用PackageInfoAppAdapterMainActivity2 其他获取已下载应用信息函数获取所有应用信息函数ImageView产生圆角的方法背景设置很渐变设置选…

二、远程控制树莓派(在用一个Wifi下)

VNC是一个图形桌面共享系统&#xff0c;利用一台计算机或移动设备&#xff08;运行VNC查看器&#xff09;远程控制另一台计算机&#xff08;运行VNC服务器&#xff09;的桌面。 Step1&#xff1a;树莓派&#xff1a;安装VNC服务器&#xff08;树莓派自带&#xff09; 打开方式…