uniapp 之 图片 视频 文件上传

在这里插入图片描述

<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);
						},
					});
				});
			},

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

安全算法(二):共享密钥加密、公开密钥加密、混合加密和迪菲-赫尔曼密钥交换

安全算法&#xff08;二&#xff09;&#xff1a;共享密钥加密、公开密钥加密、混合加密和迪菲-赫尔曼密钥交换 本章介绍了共享密钥加密、公开密钥加密&#xff0c;和两种加密方法混合使用的混合加密方法&#xff1b;最后介绍了迪菲-赫尔曼密钥交换。 加密数据的方法可以分为…

Day09 Liunx高级系统设计11-数据库1

MySQL 简介 数据库DB 数据库&#xff08; DataBase &#xff0c; DB &#xff09;从本质上讲就是一个文件系统&#xff0c;它能够将数据有组织地集合在一起&#xff0c;按照一定的规则长期存储到计算机的磁盘中&#xff0c;并且能够供多个用户共享和使用&#xff0c;同时&…

Leetcode—459.重复的子字符串【简单】

2023每日刷题&#xff08;五十九&#xff09; Leetcode—459.重复的子字符串 算法思想 巧解的算法思想 实现代码 从第一个位置开始到s.size()之前&#xff0c;看s字符串是否是ss的子串 class Solution { public:bool repeatedSubstringPattern(string s) {return (s s).fin…

西南科技大学数字电子技术实验七(4行串行累加器设计及FPGA实现)FPGA部分

一、实验目的 1、掌握基于Verilog语言的diamond工具设计全流程。 2、熟悉、应用Verilog HDL描述数字电路。 3、掌握Verilog HDL的组合和时序逻辑电路的设计方法。 4、掌握“小脚丫”开发板的使用方法。 二、实验原理 三、程序清单&#xff08;每条语句必须包括注释或在开发…

【产品应用】一体化伺服电机在TO全自动封焊机中的应用

随着科技的飞速发展&#xff0c;自动化设备在各行各业中的应用越来越广泛。在电子制造领域&#xff0c;封焊机是关键设备之一&#xff0c;其性能直接影响产品的质量和产量。近年来&#xff0c;一体化伺服电机在TO全自动封焊机中的应用逐渐受到关注。本文将详细介绍一体化伺服电…

用Rust帮Python加加速

背景 长期以来,Python由于易上手,有GC且生态强大等特点被广泛使用,可是渐渐的人们也发现了它的不足,解释型语言的运行速度终究比不过编译型,况且由于Python设计时的动态数据类型一切皆对象(内存都分配在堆上)等思想,也导致了运行速度缓慢. 随着实时性要求的不断提升,在一些计…

Windows下使用CMake编译lua

Lua 是一个功能强大、高效、轻量级、可嵌入的脚本语言。它支持程序编程、面向对象程序设计、函数式编程、数据驱动编程和数据描述。 Lua的官方网站上只提供了源码&#xff0c;需要使用Make进行编译&#xff0c;具体的编译方法为 curl -R -O http://www.lua.org/ftp/lua-5.4.6.…

Android取消深色适配

从Android10&#xff08;API 29&#xff09;开始&#xff0c;在原有的主题适配的基础上&#xff0c;Google开始提供了Force Dark机制&#xff0c;在系统底层直接对颜色和图片进行转换处理&#xff0c;原生支持深色模式。当系统设置深色主题背景或者进入省电模式情况下会进入深色…

【docker】docker入门与安装

Docker 一、入门 Docker的主要目标是&#xff1a;Build, Ship and Run Any App, Anywhere&#xff0c;也就是通过对应用组件的封装、分发、部署、运行等生命周期的管理&#xff0c;使用户的APP及其运行环境能做到一次镜像,处处运行。 Docker运行速度快的原因 Docker有比虚拟…

使用ROS模板基于ECS和RDS创建WordPress环境

本文教程介绍如何使用ROS模板基于ECS和RDS&#xff08;Relational Database Service&#xff09;创建WordPress环境。 前提条件 如果您是首次使用ROS&#xff0c;必须先开通ROS服务。ROS服务免费&#xff0c;开通服务不会产生任何费用。 背景信息 WordPress是使用PHP语言开…

算法通关村第十三关—数论问题(黄金)

数论问题 一、辗转相除法 辗转相除法又叫做欧几里得算法&#xff0c;是公元前300年左右的希腊数学家欧几里得在他的著作《几何原本》提出的。最大公约数(greatest common divisor,简写为gcd),是指几个数的共有的因数之中最大的一个&#xff0c;例如8和12的最大公因数是4&#…

+0和不+0的性能差异

前几日&#xff0c;有群友转发了某位技术大佬的weibo。并在群里询问如下两个函数哪个执行的速度比较快&#xff08;weibo内容&#xff09;。 func g(n int, ch chan<- int) {r : 0for i : 0; i < n; i {r i}ch <- r 0 }func f(n int, ch chan<- int) {r : 0for …

ubuntu解决问题:E: Unable to locate package manpages-posix-dev

sudo apt-get install manpages-posix-dev 想要在ubuntu里面安装manpages-posix-dev这个包&#xff0c;发现弹出错误 E: Unable to locate package manpages-posix-dev 解决方法如下&#xff1a; 1 查看当前ubuntu的版本 abhishekitsfoss:~$ lsb_release -a No LSB module…

基于node 安装express后端脚手架

1.首先创建文件件 2.在文件夹内打开终端 npm init 3.安装express: npm install -g express-generator注意的地方&#xff1a;这个时候安装特别慢,最后导致不成功 解决方法&#xff1a;npm config set registry http://registry.npm.taobao.org/ 4.依次执行 npm install -g ex…

CSS新手入门笔记整理:元素类型相互转换

元素类型 块元素&#xff08;block&#xff09; 独占一行&#xff0c;排斥其他元素跟其位于同一行&#xff0c;包括块元素和行内元素。块元素内部可以容纳其他块元素和行内元素。可以定义 width&#xff0c;也可以定义 height。可以定义 4 个方向的 margin。 行内元素&#xf…

格式工厂功能详解!!

格式工厂&#xff08;Format Factory&#xff09;是由上海格诗网络科技有限公司创立于2008年2月&#xff0c;是面向全球用户的互联网软件。 下载地址https://www.onlinedown.net/soft/64717.htm&#xff1a; 该软件的主打产品“格式工厂”发展以来&#xff0c;已经成为全球领…

为什么越来越多的人从事软件测试行业?

1.市场需求增加&#xff1a;随着数字化转型和互联网的普及&#xff0c;各行各业都需要高质量、稳定可靠的软件来支持其业务运作。因此&#xff0c;对软件测试人员的需求也随之增加。同时&#xff0c;新兴技术的发展&#xff0c;如物联网、大数据、区块链、人工智能等&#xff0…

VR全景技术对房产行业有什么好处,如何帮助展示户型

引言&#xff1a; 随着科技的飞速发展&#xff0c;VR全景技术逐渐走入我们的生活&#xff0c;为我们带来了前所未有的沉浸式体验。在房产行业&#xff0c;VR全景技术正逐渐改变传统的户型和样板间展示方式&#xff0c;为购房者带来更为直观、真实的购房体验。 一、VR全景技术在…

如何在 Eolink Apikit 中发起 TCP/UDP 文档测试

TCP/UDP 是两种常用的网络传输协议。TCP 协议提供可靠的连接&#xff0c;而 UDP 协议提供不可靠的连接。 TCP 协议是面向连接的协议&#xff0c;在建立连接之前&#xff0c;客户端和服务器需要先握手。握手完成后&#xff0c;客户端和服务器之间就会建立一个可靠的连接。在连接…

方案分享:如何做好云中的DDoS防御?

所有企业都会有遭受DDoS攻击的风险。由于目前DDoS即服务&#xff08;DaaS&#xff09;的售价低廉&#xff0c;因此对于恶意攻击者来说&#xff0c;发起攻击比以往任何时候都更加容易&#xff0c;技术门槛也更低。分析公司IDC一项关于DDoS防御的调查显示&#xff0c;超过50%的IT…