当前位置: 首页 > news >正文

【uniapp】uview1.x使用upload上传图片

和2.x不同的是,要用 action 来配置后端上传图片的接口地址;
再来一些配置项的命名有所不同,一般1.x的命名用 -,2.x的命名使用小驼峰;
1.x 的上传会自带删除时的提示框,2.x 没有;

重要的几个配置项有:

<u-upload :file-list="picList" :action="baseUrl" :before-upload="beforeUpload":before-remove="beforeRemove"
></u-upload>

picList 初始化为一个空数组,是用来保存图片的列表
baseUrl 为后端上传图片的接口
beforeUpload 为图片上传之前的回调
beforeRemove 为图片删除之前的回调

这两个回调函数的参数皆为:indexlist,指当前的图片的下标和已有图片的列表
图片上传:

beforeUpload(index, list) {this.picList = []// console.log('list',list);list.map(async item => {this.picList.push({url: item.url})let result = await this.uploadFilePromise(item.url);console.log(result);})console.log('照片列表',this.picList);},// 上传图片uploadFilePromise(url) {return new Promise((resolve, reject) => {uni.uploadFile({// 仅为示例,非真实的接口地址url: `${BASE_URL}/api/pic/upload`,filePath: url,name: "file",formData: {typeEnum: "IMAGE",},success: (res) => {resolve(res.data);console.log(res);},});});},

照片列表打印结果:
在这里插入图片描述
上传成功的返回结果:
在这里插入图片描述
补充比较常用的:
max-count="9":用来设置最大可上传图片数量
:max-size="5 * 1024 * 1024" :用来单张图片可上传的大小

相关文章:

【uniapp】uview1.x使用upload上传图片

和2.x不同的是&#xff0c;要用 action 来配置后端上传图片的接口地址&#xff1b; 再来一些配置项的命名有所不同&#xff0c;一般1.x的命名用 -&#xff0c;2.x的命名使用小驼峰&#xff1b; 1.x 的上传会自带删除时的提示框&#xff0c;2.x 没有&#xff1b; 重要的几个配置…...

基于nodejs+vue食力派网上订餐系统

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…...

软件测试常用的8种功能测试类型有哪些?

软件测试常用的8种功能测试类型有哪些&#xff1f; 单元测试 单元测试确保在一个段中编写的每一段代码都能产生最佳结果。开发人员在单元测试期间只看接口和确定部件。它提供了代码进展的文档&#xff0c;因为每个代码单元在继续下一个之前都经过了彻底的测试。 集成测试 至少对…...

动态规划之01背包问题

01背包问题 1. 【模板】01背包2. 分割等和子集3. 目标和4. 最后一块石头的重量 II 01背包问题是一种动态规划问题&#xff0c;用于求解在有限容量的背包中装入最大价值的物品组合。具体步骤如下&#xff1a; 定义一个二维数组dp[i][j]&#xff0c;表示从前i个物品中选择若干个…...

安防监控项目---boa服务器的移植

文章目录 前言一、boa服务器简介二、移植步骤三、测试结果四、A9平台移植BOA总结 前言 书接上期&#xff0c;在配置完成环境后&#xff0c;那么接下来呢还得移植两个非常关键的东西&#xff0c;一个呢时boa服务器&#xff0c;另一个呢时cgi接口&#xff0c;boa服务器能够使得我…...

Gson 字符串常用转换方式(集合转换为Json数组

数组转换为 Json 字符串&#xff1a; GsonUtils.toJson(itemListBean.getImgs())json 字符串转换为数组 Gson().fromJson(goodsDbBean.getImgs(), String[].class)Json 转换为已知实体类 GsonUtils.parseJSON(result, AFileInfoBean.class);Json 转换为已知实体类集合 List<…...

MyBatis的使用(XML映射文件)

MyBatis的使用&#xff08;XML映射文件&#xff09; MyBatis基于注解开发简单便捷&#xff0c;但是弊端是失去SQL语句的灵活性&#xff0c;不能根据实际情况产生不同的SQL语句 MyBatis除了支持注解开发以外&#xff0c;还支持一种开发方式&#xff1a;XML映射文件&#xff0c…...

localhost知识

文章目录 一、localhost是什么&#xff1f;二、localhost 在平时用到的地方三、 localhost 与 127.0.01 一、localhost是什么&#xff1f; localhost 是一个特殊的主机名&#xff0c;通常指代本机。它被用来进行本地开发和测试&#xff0c;也常被用作网络配置中的占位符&#…...

PyTorch入门学习(八):神经网络-卷积层

目录 一、数据准备 二、创建卷积神经网络模型 三、可视化卷积前后的图像 一、数据准备 首先&#xff0c;需要准备一个数据集来演示卷积层的应用。在这个示例中&#xff0c;使用了CIFAR-10数据集&#xff0c;该数据集包含了10个不同类别的图像数据&#xff0c;用于分类任务。…...

【EI会议征稿】 2024年遥感、测绘与图像处理国际学术会议(RSMIP2024)

2024年遥感、测绘与图像处理国际学术会议(RSMIP2024) 2024 International Conference on Remote Sensing, Mapping and Image Processing 2024年遥感、测绘与图像处理国际学术会议(RSMIP2024)将于2024年1月19日-21日在中国厦门举行。会议主要围绕遥感、测绘与图像处理等研究领…...

MySQL 8 - 处理 NULL 值 - is null、=null、is not null、<> null 、!= null

处理 NULL 值&#xff1a; IS NULL&#xff1a;IS NULL 用于检查一个列是否为 NULL。例如&#xff0c;如果查找一个表中某一列的值为 NULL 的行&#xff0c;可以使用以下语法&#xff1a; SELECT * FROM table_name WHERE column_name IS NULL;IS NOT NULL&#xff1a;IS NOT N…...

高教社杯数模竞赛特辑论文篇-2018年C题:大型百货商场会员画像描述(附获奖论文及MATLAB代码实现)

目录 摘 要 一、问题重述 1.1 问题背景 1.2 问题提出 二、问题分析 2.1 问题一的分析...

#力扣:2315. 统计星号@FDDLC

2315. 统计星号 - 力扣&#xff08;LeetCode&#xff09; 一、Java class Solution {public int countAsterisks(String s) {int cnt 0;boolean flag true;for(char c: s.toCharArray()) {if(c |) flag !flag;else if(c * && flag) cnt;}return cnt;} }...

设计模式——单例模式详解

目录 设计模式类型单例模式单例模式方式饿汉式静态常量方式静态代码块形式 懒汉式线程不安全&#xff08;不推荐&#xff09;懒汉式优化&#xff08;不推荐&#xff09; 双重检查&#xff08;推荐方式&#xff09;静态内部类&#xff08;推荐方式&#xff09;枚举方式&#xff…...

一、W5100S/W5500+RP2040树莓派Pico<静态配置网络信息>

文章目录 1. 前言2. 相关网络信息2.1 简介2.2 优点2.3 应用 3. WIZnet以太网芯片4. 静态IP网络设置示例讲解以及使用4.1 程序流程图4.2 测试准备4.3 连接方式4.4 相关代码4.5 编译烧录 5. 注意事项6. 相关链接 1. 前言 从本章开始我们将用WIZnet的W5100S/W5500以太网芯片结合RP…...

【C++的OpenCV】第十四课-OpenCV基础强化(二):访问单通道Mat中的值

&#x1f389;&#x1f389;&#x1f389; 欢迎各位来到小白 p i a o 的学习空间&#xff01; \color{red}{欢迎各位来到小白piao的学习空间&#xff01;} 欢迎各位来到小白piao的学习空间&#xff01;&#x1f389;&#x1f389;&#x1f389; &#x1f496;&#x1f496;&…...

elementUI el-collapse 自定义折叠面板icon 和 样式 或文字展开收起

: :v-deep{.el-collapse-item__arrow {width: 40px;}.el-icon-arrow-right:before {content: "展开";font-size: 15px;font-family: heiti;color: #2295ff;font-weight: bold;}.el-collapse-item__arrow.is-active {transform: none;}.el-collapse-item__arrow.is-a…...

如何用个人数据Milvus Cloud知识库构建 RAG 聊天机器人?(上)

生成式人工智能时代,开发者可以借助大语言模型(LLM)开发更智能的应用程序。然而,由于有限的知识,LLM 非常容易出现幻觉。检索增强生成(RAG)https://zilliz.com/use-cases/llm-retrieval-augmented-generation 通过为 LLM 补充外部知识,有效地解决了这一问题。 在 Chat …...

2023年江西省“振兴杯”工业互联网安全技术技能大赛暨全国大赛江西选拔赛 Write UP

文章目录 一、协议分析 - modbus二、协议分析 - 异常的流量三、协议分析 - S7Error四、协议分析 - OmronAttack五、组态编程 - 工程的秘密六、组态编程 - 工程的秘密七、组态编程 - 简单的计算八、组态编程 - 交通灯九、组态编程 - 有趣的转盘十、应急处置 - 登录日志分析十一、…...

PostMan 之 Mock 接口测试

在测试的时候经常会碰到后端开发工程师的接口还没有开发完成&#xff0c;但是测试任务已经分配过来。没有接口怎么测试呢&#xff1f; 测试人员可以通过 mock server 自己去造一个接口来访问。mock server 可用于模拟真实的接口。收到请求时&#xff0c;它会根据配置返回对应的…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

Java并发编程实战 Day 11:并发设计模式

【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天&#xff0c;今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案&#xff0c;它们不仅提供了优雅的设计思路&#xff0c;还能显著提升系统的性能…...

C++中vector类型的介绍和使用

文章目录 一、vector 类型的简介1.1 基本介绍1.2 常见用法示例1.3 常见成员函数简表 二、vector 数据的插入2.1 push_back() —— 在尾部插入一个元素2.2 emplace_back() —— 在尾部“就地”构造对象2.3 insert() —— 在任意位置插入一个或多个元素2.4 emplace() —— 在任意…...

轻量安全的密码管理工具Vaultwarden

一、Vaultwarden概述 Vaultwarden主要作用是提供一个自托管的密码管理器服务。它是Bitwarden密码管理器的第三方轻量版&#xff0c;由国外开发者在Bitwarden的基础上&#xff0c;采用Rust语言重写而成。 &#xff08;一&#xff09;Vaultwarden镜像的作用及特点 轻量级与高性…...

信息收集:从图像元数据(隐藏信息收集)到用户身份的揭秘 --- 7000

目录 &#x1f310; 访问Web服务 &#x1f4bb; 分析源代码 ⬇️ 下载图片并保留元数据 &#x1f50d; 提取元数据&#xff08;重点&#xff09; &#x1f464; 生成用户名列表 &#x1f6e0;️ 技术原理 图片元数据&#xff08;EXIF 数据&#xff09; Username-Anarch…...