当前位置: 首页 > 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;用于玩家操作&#…...

CentOS 7上解决soffice转换doc到docx报错‘no export filter‘的完整指南(附字体安装)

CentOS 7服务器深度修复&#xff1a;soffice文档转换no export filter全链路解决方案当你在CentOS 7服务器上执行soffice --convert-to docx命令时&#xff0c;终端突然抛出Error: no export filter的红色警告——这不是简单的命令错误&#xff0c;而是典型的环境依赖链断裂。作…...

【2024播客降本增效终极方案】:单人团队如何用开源TTS实现月产60期高保真节目(附实测MOS分对比表)

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;AI语音合成在播客制作中的应用 AI语音合成技术正深刻重塑播客内容的生产流程&#xff0c;从脚本转语音、多角色配音到个性化音色定制&#xff0c;已实现端到端自动化与高质量听感的统一。相比传统录音方式&am…...

从零到亿级调用量:电商客服Agent重构实录(含对话状态机+意图跳转图+人工接管SLA协议)

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;从零到亿级调用量&#xff1a;电商客服Agent重构实录&#xff08;含对话状态机意图跳转图人工接管SLA协议&#xff09; 面对日均峰值超1.2亿次的客服请求&#xff0c;原有基于规则匹配的客服Bot在大促期间频繁…...

机器学习基础算法

机器学习基础算法 1. 技术分析 1.1 机器学习概述 机器学习是数据科学的核心&#xff1a; 机器学习类型监督学习: 有标签数据无监督学习: 无标签数据半监督学习: 部分标签强化学习: 交互学习学习任务:分类: 离散输出回归: 连续输出聚类: 分组1.2 监督学习算法 监督学习算法线性模…...

Alibaba组件选型与架构设计

Alibaba组件选型与架构设计 前言 本文将总结Spring Cloud Alibaba各组件的特点&#xff0c;并根据不同业务场景提供选型建议和架构设计指导。 一、组件对比与选型 1.1 注册中心对比 特性NacosEurekaConsulCAP模型CP/AP可切换APCP多语言支持HTTP/DNSHTTPHTTP/DNS配置管理原生支持…...

从Java全栈开发到云原生:一次真实的面试对话与技术剖析

从Java全栈开发到云原生&#xff1a;一次真实的面试对话与技术剖析 面试场景回顾 在一次真实的互联网大厂Java全栈开发岗位的面试中&#xff0c;面试官和应聘者展开了一场围绕技术栈、项目经验和系统设计的深入交流。面试官以专业严谨的态度&#xff0c;逐步引导应聘者展示其技…...

2026最新Burp Suite安装配置指南:Java环境、系统兼容性与代理调试

1. 为什么2026年还在手把手教Burp Suite安装&#xff1f;这不是过时的工具&#xff0c;而是安全测试的“瑞士军刀”很多人看到“Burp Suite安装教程”第一反应是&#xff1a;这玩意儿不是十年前就烂大街了吗&#xff1f;配个Java环境、下个JAR包、双击运行——三步搞定&#xf…...

顶伯在线语音工具

⌨️ 顶伯在线语音工具快捷键大全顶伯文字转语音工具内置了丰富的快捷键&#xff0c;让您无需鼠标即可高效操控微软 TTS 引擎。下面为您汇总全部快捷键&#xff0c;建议收藏。⭐⚡ 一、核心操作快捷键▶️ 播放 / 暂停&#xff1a;Ctrl Enter开始或暂停当前文本的语音合成⏹️…...

别再只会用HAL_GPIO_WritePin了!深入STM32的BSRR和BRR寄存器,让你的GPIO操作快人一步

突破HAL库限制&#xff1a;STM32 GPIO寄存器级操作实战指南 在嵌入式开发领域&#xff0c;效率往往决定着产品的竞争力。当我们使用STM32 HAL库进行GPIO操作时&#xff0c;HAL_GPIO_WritePin()可能是最常用的函数之一。但您是否知道&#xff0c;在高速PWM生成、精确时序控制或自…...

Dark Reader终极指南:轻松为任何网站开启完美深色模式

Dark Reader终极指南&#xff1a;轻松为任何网站开启完美深色模式 【免费下载链接】darkreader Dark Reader Chrome and Firefox extension 项目地址: https://gitcode.com/gh_mirrors/da/darkreader Dark Reader是一款广受欢迎的浏览器扩展&#xff0c;它能智能分析网页…...