当前位置: 首页 > 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;它会根据配置返回对应的…...

数据库设计利器:Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF智能生成SQL与优化建议

数据库设计利器&#xff1a;Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF智能生成SQL与优化建议 1. 专业级SQL生成能力展示 在数据库开发领域&#xff0c;编写高效准确的SQL语句是每个开发者和DBA的基本功。Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF模型…...

开源鸿蒙赋能水务智能化,IPC3528水务鸿蒙网关

近深圳五指耙水厂正式完成鸿蒙化智能升级&#xff0c;成为全国首座鸿蒙智慧水厂&#xff0c;标志开源鸿蒙生态在智慧水务领域实现落地&#xff0c;为开源鸿蒙产业生态拓展写下关键一笔。触觉智能-水务鸿蒙硬件方案触觉智能基于RK3568平台的IDO-IPC3528工控机&#xff0c;对鸿蒙…...

AI与数据库智能交互:Qwen3-0.6B-FP8实现自然语言转SQL查询

AI与数据库智能交互&#xff1a;Qwen3-0.6B-FP8实现自然语言转SQL查询 你有没有过这样的经历&#xff1f;面对公司后台密密麻麻的数据表&#xff0c;想查点东西&#xff0c;却不知道该怎么写SQL语句。或者&#xff0c;你是个业务人员&#xff0c;每次想分析数据都得找技术同事…...

MQTT(消息队列遥测传输)

MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传输协议&#xff09;是一种轻量级、基于发布/订阅模式的消息传输协议&#xff0c;专为受限设备、低带宽、高延迟、不稳定网络的物联网通信设计的。MQTT诞生于1999年&#xff0c;目的是用最小的网…...

Chain-of-Thought Hub进阶应用:多轮对话和长上下文推理评测

Chain-of-Thought Hub进阶应用&#xff1a;多轮对话和长上下文推理评测 【免费下载链接】chain-of-thought-hub Benchmarking large language models complex reasoning ability with chain-of-thought prompting 项目地址: https://gitcode.com/gh_mirrors/ch/chain-of-thou…...

车灯设计师必看:CATIA中FreeStyle模块的10个高效技巧

车灯设计师必看&#xff1a;CATIA中FreeStyle模块的10个高效技巧 在汽车照明系统的设计中&#xff0c;曲面造型的精度与美感直接决定了最终产品的市场竞争力。作为行业标准工具&#xff0c;CATIA的FreeStyle模块为车灯设计师提供了强大的自由曲面创建能力&#xff0c;但真正掌握…...

Android媒体开发 -(2)ExoPlayer高级功能:播放列表与动态资源加载

1. ExoPlayer播放列表基础操作 在Android媒体开发中&#xff0c;ExoPlayer的播放列表管理功能远比想象中强大。记得我第一次用MediaPlayer实现播放列表时&#xff0c;不得不手动处理队列切换和状态同步&#xff0c;而ExoPlayer通过ConcatenatingMediaSource和MediaItem的配合&a…...

gciWidget:面向车载嵌入式系统的轻量级GUI组件库

1. 项目概述gciWidget是面向大众汽车集团&#xff08;Volkswagen Group&#xff09;CARIAD 车载软件平台定制开发的轻量级图形用户界面&#xff08;GUI&#xff09;组件库&#xff0c;专为嵌入式车载显示系统设计。其核心定位并非通用型 GUI 框架&#xff08;如 LVGL 或 TouchG…...

OpenClaw+Qwen3-14B镜像实战:5分钟搭建飞书智能助手

OpenClawQwen3-14B镜像实战&#xff1a;5分钟搭建飞书智能助手 1. 为什么选择这个组合&#xff1f; 上周三晚上11点&#xff0c;我正在为第二天的部门会议整理材料时&#xff0c;突然冒出一个想法&#xff1a;能不能让AI自动处理这些重复性工作&#xff1f;经过一番折腾&…...

煤矸石自动分离机设计【论文+CAD图纸】

煤矸石作为煤炭开采与洗选过程中产生的固体废弃物&#xff0c;其成分复杂、粒度分布不均&#xff0c;传统人工分选效率低且精度难以保证。煤矸石自动分离机的设计以机械结构优化与物料特性分析为核心&#xff0c;通过多级筛分与智能识别技术的结合&#xff0c;实现煤矸石与煤炭…...