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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

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

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

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...