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

nuiapp vue3 uni-ui uni.uploadFile 图片上传

<div style="position: relative;margin-top: 0.8em;">
            <div style="position: absolute;left: 1.5em;top: 2em;">施工图片</div>
            <div style="position: absolute; left: 7em;top: 0em;right: 0em;bottom: 0em;">
                <uni-file-picker style="width:3em;height: 3em;" v-model="imageValue" fileMediatype="image" mode="grid"
                    @select="select" @progress="progress" @success="success" @fail="fail" />
            </div>
 </div>


<script setup>
    import api from '@/common/httprequest.js'
    //=============图片上传方法开始============//
    // 获取上传状态
    const select = (res) => {
        let file = res.tempFiles[0];
        let baseURL = api.getUrl();

        uni.uploadFile({
            url: `${baseURL}/common/upload`, // 上传图片的接口
            filePath: file.path,
            name: 'file',
            formData: {},
            success(e) {
                let res = JSON.parse(e.data);
                console.log('imgres',res);
                
                // if (res.code == 200) {
                //     obj.userImg = res.fileName;
                //     defaultImage.value = null;
                // }
            },
            fail(err) {
                console.error('上传失败:', err);
            }
        });

    }
    // 获取上传进度
    const progress = (e) => {
        console.log('上传进度:', e)
    }
    // 上传成功
    const success = (e) => {
        console.log('上传成功')
    }
    // 上传失败
    const fail = (e) => {
        console.log('上传失败:', e)
    }
    //=============图片上传方法结束==================//
</script>

相关文章:

nuiapp vue3 uni-ui uni.uploadFile 图片上传

<div style"position: relative;margin-top: 0.8em;"> <div style"position: absolute;left: 1.5em;top: 2em;">施工图片</div> <div style"position: absolute; left: 7em;top: 0em;right: 0em;bottom…...

【计算机科学】位运算:揭开二进制世界的奥秘

位运算是计算机运算的一种基础操作&#xff0c;直接作用于数据的二进制位&#xff08;bit&#xff09;&#xff0c;在计算机中具有极高的效率。无论是编写高效算法&#xff0c;还是进行底层开发&#xff0c;位运算都扮演着重要角色。本文将从位运算的起源、常见操作符、应用场景…...

弹性裸金属服务器和传统裸金属服务器有什么区别?

弹性裸金属服务器是一种结合了传统裸金属服务器和云计算资源两种特点的服务器&#xff0c;是一种云计算服务&#xff0c;下面我们就来了解一下弹性裸金属服务器和传统裸金属服务器之间有什么区别吧&#xff01; 弹性裸金属服务器能够支持企业快速部署新的硬件和软件系统&#x…...

shodan(五)连接Mongodb数据库Jenkinsorg、net、查看waf命令

声明&#xff1a;学习素材来自b站up【泷羽Sec】&#xff0c;侵删&#xff0c;若阅读过程中有相关方面的不足&#xff0c;还请指正&#xff0c;本文只做相关技术分享,切莫从事违法等相关行为&#xff0c;本人一律不承担一切后果 引言&#xff1a; 1.Shodan 是一个专门用于搜索连…...

ThingsBoard规则链节点:Push to Edge节点详解

引言 1. Push to Edge 节点简介 2. 节点配置 2.1 基本配置示例 3. 使用场景 3.1 边缘计算 3.2 本地数据处理 3.3 实时响应 4. 实际项目中的应用 4.1 项目背景 4.2 项目需求 4.3 实现步骤 5. 总结 引言 ThingsBoard 是一个开源的物联网平台&#xff0c;提供了设备管…...

基于 EventBridge + DashVector 打造 RAG 全链路动态语义检索能力

作者&#xff1a;肯梦 本文将演示如何使用事件总线&#xff08;EventBridge&#xff09;&#xff0c;向量检索服务&#xff08;DashVector&#xff09;&#xff0c;函数计算&#xff08;FunctionCompute&#xff09;结合灵积模型服务 [ 1] 上的 Embedding API [ 2] &#xff0…...

【golang/navmesh】使用recast navigation进行寻路

目录 说在前面安装使用可视化 说在前面 go version&#xff1a;1.20.2 linux/amd64操作系统&#xff1a;wsl2detour-go版本&#xff1a;v0.2.0github&#xff1a;这里&#xff0c;求star! 安装 使用go mod安装即可go get github.com/o0olele/detour-go使用 使用场景模型构建n…...

【软考】Redis不同的数据类型和应用场景。

Redis的不同数据类型和对应的应用场景&#xff1a; Redis 数据类型及其应用场景 String&#xff08;字符串&#xff09; 特点&#xff1a;简单的值存储&#xff0c;支持二进制数据。应用场景&#xff1a; 缓存用户会话。缓存小的配置文件。缓存计数器。文章浏览量&#xff0…...

java 对人名和电话 脱敏-replaceAll

学习了《正则匹配人名》和《正则匹配电话号码》&#xff0c;如果要一起进行脱敏处理&#xff0c;改怎么做&#xff1f; 脱敏的&#xff0c;考虑配置规则&#xff0c;进行匹配的方式进行处理&#xff1a; 脱敏规则&#xff1a; DesensitizationRules Data public class Desens…...

计算机网络:网络层 —— 网络地址转换 NAT

文章目录 网络地址转换 NAT 概述最基本的 NAT 方法NAT 转换表的作用 网络地址与端口号转换 NAPTNAT 和 NAPT 的缺陷 网络地址转换 NAT 概述 尽管因特网采用了无分类编址方法来减缓 IPv4 地址空间耗尽的速度&#xff0c;但由于因特网用户数量的急剧增长&#xff0c;特别是大量小…...

【Pikachu靶场:XSS系列】xss之过滤,xss之htmlspecialchars,xss之herf输出,xss之js输出通关啦

一、xss之过滤 <svg onloadalert("过关啦")> 二、xss之htmlspecialchars javascript:alert(123) 原理&#xff1a;输入测试文本为herf的属性值和内容值&#xff0c;所以转换思路直接变为js代码OK了 三、xss之href输出 JavaScript:alert(假客套) 原理&#x…...

面向制造和装配的产品设计指南(二):面向装配的设计指南

参考引用 面向制造和装配的产品设计指南 1. 概述 1.1 装配的概念 装配是指把多个零件组装成产品&#xff0c;使得产品能够实现相应的功能并体现产品的质量&#xff0c;装配包含三层含义 把零件组装在一起实现相应的功能体现产品的质量 1.2 最好和最差的装配工序 1.3 面向装…...

Python中的PDF处理工具:PyPDF2和ReportLab使用指南

Python中的PDF处理工具&#xff1a;PyPDF2和ReportLab使用指南 在日常工作和项目中&#xff0c;PDF 文件处理是个常见需求&#xff0c;不论是合并报告、加密文档、填充表单&#xff0c;还是生成发票。Python 中有许多用于操作 PDF 文件的库&#xff0c;其中 PyPDF2 和 ReportL…...

【vxe-table】多选筛选项对列表的列进行动态的显示与隐藏

需求&#xff1a; 列表的组成部分由&#xff1a;一些固定的列&#xff0c;如:姓名&#xff0c;工号&#xff0c;以及 需要动态显示与隐藏的列&#xff0c;如&#xff1a;出勤、旷工、事假、病假等假勤类型 1、通过多选框多选&#xff0c;展示选中的列&#xff0c;未选中的不展示…...

微信小程序uniapp+vue飞机订票航空售票系统

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 对于小程序飞机订票信息管理所牵扯的信息管理及数据保存都是非常多的&#xff0c;举例像所有的管理员&#xff1b;管理员…...

如何取消Outlook中的循环会议

如何取消Outlook中的循环会议 参考链接&#xff1a;https://iknow.lenovo.com.cn/detail/195430 1、打开Outlook&#xff0c;进入 日历 视图界面&#xff1b; 2、 选择并双击要取消的循环会议&#xff1b; 3、 在 打开定期项目 对话框中选择整个序列&#xff0c;然后单击 确…...

Docker-- cgroups资源控制实战

上一篇&#xff1a;容器化和虚拟化 什么是cgroups&#xff1f; cgroups是Linux内核中的一项功能&#xff0c;最初由Google的工程师提出&#xff0c;后来被整合进Linux内核; 它允许用户将一系列系统任务及其子任务整合或分隔到按资源划分等级的不同组内&#xff0c;从而为系统…...

使用Python和Vosk库实现语音识别

使用Python和Vosk库实现语音识别 在人工智能和机器学习领域&#xff0c;语音识别技术正变得越来越重要。Python作为一种强大的编程语言&#xff0c;拥有丰富的库和框架&#xff0c;可以方便地实现语音识别功能。今天&#xff0c;我们将介绍如何使用Python中的SpeechRecognitio…...

stm32使用串口的轮询模式,实现数据的收发

------内容以b站博主keysking为原型&#xff0c;整理而来&#xff0c;用作个人学习记录。 首先在STM32CubeMX中配置 前期工作省略&#xff0c;只讲重点设置。 这里我配置的是USART2的模式。 会发现&#xff0c;PA2和PA3分别是TX与RX&#xff0c;在连接串口时需要TX对RX&…...

105. UE5 GAS RPG 搭建主菜单

在这一篇&#xff0c;我们将实现对打开游戏显示的主菜单进行搭建&#xff0c;主菜单将显示游戏主角&#xff0c;游戏名称和进入游戏和退出游戏两个按钮。 搭建菜单场景 我们将主菜单设置为一个单独的场景&#xff0c;前面可以显示对应的UI控件&#xff0c;用于玩家操作&#…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

Python学习(8) ----- Python的类与对象

Python 中的类&#xff08;Class&#xff09;与对象&#xff08;Object&#xff09;是面向对象编程&#xff08;OOP&#xff09;的核心。我们可以通过“类是模板&#xff0c;对象是实例”来理解它们的关系。 &#x1f9f1; 一句话理解&#xff1a; 类就像“图纸”&#xff0c;对…...

Linux-进程间的通信

1、IPC&#xff1a; Inter Process Communication&#xff08;进程间通信&#xff09;&#xff1a; 由于每个进程在操作系统中有独立的地址空间&#xff0c;它们不能像线程那样直接访问彼此的内存&#xff0c;所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...

【工具教程】多个条形码识别用条码内容对图片重命名,批量PDF条形码识别后用条码内容批量改名,使用教程及注意事项

一、条形码识别改名使用教程 打开软件并选择处理模式&#xff1a;打开软件后&#xff0c;根据要处理的文件类型&#xff0c;选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件&#xff0c;就选择 “PDF 识别模式”&#xff1b;若是处理图片文件&…...