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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/465566.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

美畅物联丨物联网通信新纪元:Cat.1与5G RedCap的差异化应用

​ 在物联网&#xff08;IoT&#xff09;迅猛发展的时代&#xff0c;通信标准对物联网设备的连接性、性能和适用性有着极为关键的作用。小编在《美畅物联丨Cat.1与NB-IoT&#xff1a;物联网设备的通信标准对比》中提到Cat.1与NB-IoT的对比区别&#xff0c;后来就有小伙伴问&…

OpenCV视觉分析之目标跟踪(12)找到局部的最大值函数meanShift()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在反向投影图像上找到一个对象。 meanShift 是一种用于图像处理和计算机视觉领域的算法&#xff0c;特别适用于目标跟踪、图像分割等任务。该算…

应急救援无人车:用科技守护安全!

一、核心功能 快速进入危险区域&#xff1a; 救援无人车能够迅速进入地震、火灾、洪水等自然灾害或重大事故的现场&#xff0c;这些区域往往对人类救援人员构成极大威胁。 通过自主导航和环境感知技术&#xff0c;无人车能够避开危险区域&#xff0c;确保自身安全的同时&…

安装acondana3, Conda command not found

Linux 服务器安装acondana3后 输入conda找不到 写入路径也没找到 vim ~/.bashrc 加入 PATH"root/anaconda3/bin:$PATH" 更新文件&#xff1a; source ~/.bashrc 还是找不到conda 命令 解决办法 source ~/anaconda3/etc/profile.d/conda.sh conda activate Your_e…

第07章 运算符的使用

一、算数运算符 算术运算符主要用于数学运算&#xff0c;其可以连接运算符前后的两个数值或表达式&#xff0c;对数值或表达式进行加 &#xff08;&#xff09;、减&#xff08;-&#xff09;、乘&#xff08;*&#xff09;、除&#xff08;/&#xff09;和取模&#xff08;%&a…

6堆(超级重点)

堆&#xff08;Heap&#xff09;的核心概述 堆针对一个 JVM 进程来说是唯一的&#xff0c;也就是一个进程只有一个 JVM&#xff0c;但是进程包含多个线程&#xff0c;他们是共享同一堆空间的。 6.1.1. 堆内存细分 Java 7 及之前堆内存逻辑上分为三部分&#xff1a;新生区养老…

Google Guava 发布订阅模式/生产消费者模式 使用详情

目录 Guava 介绍 应用场景举例 1. 引入 Maven 依赖 2. 自定义 Event 事件类 3. 定义 EventListener 事件订阅者 4. 定义 EventBus 事件总线 5. 定义 Controller 进行测试 Guava 介绍 Guava 是一组来自 Google 的核心 Java 库&#xff0c;里面包括新的集合 类型&#xff08…

全面解析:网络协议及其应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 # 全面解析&#xff1a;网络协议及其应用 文章目录 网络协议概述定义发展历程主要优势 主要网络协议应用层协议传输层协议网络层…

如何使用SSH密钥和公钥加密技术保护您的cPanel服务器

在服务器管理过程中&#xff0c;cPanel和WHM是我们常用的管理工具。然而&#xff0c;有时我们仍然需要直接登录到服务器的Shell环境&#xff0c;以便执行脚本或修改配置文件。使用SSH是最安全的远程登录方式。SSH是一种安全协议&#xff0c;它能够加密你向服务器发送的命令以及…

【前端】JSX 中的 Fragments 详解

在 React 和 JSX 中&#xff0c;Fragments 是一个非常有用的概念&#xff0c;用于在不引入额外 DOM 节点的情况下返回多个元素。Fragments 可以帮助你保持 DOM 结构的整洁&#xff0c;避免不必要的嵌套层级。本文将详细介绍 Fragments 的概念、用法以及其在实际开发中的应用场景…

mac单独打开QT帮助文档助手

mac单独打开QT帮助文档助手 1.概述 windows和mac查看QT帮助文档的路径不同&#xff0c;下面给出两个系统的查找路径。 Windows 下&#xff1a; C:\Qt\Qt5.9.9\5.9.9\mingw49_32\bin\assistant.exeMac 下&#xff1a; /Users/apple/Qt5.9.9/5.9.9/clang_64/bin/Assistant2.使…

SSLHandshakeException错误解决方案

1、错误提示 调用Http工具报如下异常信息&#xff1a; cn.hutool.core.io.IORuntimeException: SSLHandshakeException: Received fatal alert: handshake_failure2、查询问题 一开始我以为是代码bug&#xff0c;网络bug甚至是配置环境未生效&#xff0c;找了一大圈&#xf…

海量数据迁移:Elasticsearch到OpenSearch的无缝迁移策略与实践

文章目录 一&#xff0e;迁移背景二&#xff0e;迁移分析三&#xff0e;方案制定3.1 使用工具迁移3.2 脚本迁移 四&#xff0e;方案建议 一&#xff0e;迁移背景 目前有两个es集群&#xff0c;版本为5.2.2和7.16.0&#xff0c;总数据量为700T。迁移过程需要不停服务迁移&#…

【IEEE出版】第六届国际科技创新学术交流大会暨信息技术与计算机应用学术会议(ITCA 2024,12月06-08)

第六届国际科技创新学术交流大会暨信息技术与计算机应用学术会议&#xff08;ITCA 2024) 2024 6th International Conference on Information Technology and Computer Application 会议官网&#xff1a;itca2024.iaecst.org 会议时间&#xff1a;2024年12月06-08日 截稿时…

Charles抓包_Android

1.下载地址 2.破解方法 3.安卓调试办法 查看官方文档&#xff0c;Android N之后抓包要声明App可用User目录下的CA证书 3.1.在Proxy下进行以下设置&#xff08;路径Proxy->Proxy Settings&#xff09; 3.1.1.不抓包Windows&#xff0c;即不勾选此项&#xff0c;免得打输出不…

研究大语言模型在心理保健智能顾问的有效性和挑战

概述 心理保健是现代社会一个日益严重的问题。例如&#xff0c;在日本&#xff0c;自杀是 10-39 岁人群的首要死因。此外&#xff0c;根据世界卫生组织&#xff08;WHO&#xff09;的数据&#xff0c;自杀是全球年轻人的首要死因。在此背景下&#xff0c;通过短信应用程序提供…

海外媒体发稿:国外媒体通稿PR发布-提升品牌影响力的绝佳选择

大舍传媒 在当今全球化的商业环境中&#xff0c;海外媒体发稿已经成为企业拓展国际市场、提升品牌知名度的重要手段。特别是在沙特这样的中东地区&#xff0c;通过在当地知名的汽车垂直媒体上发布新闻通稿PR&#xff0c;能够为您的品牌带来前所未有的曝光和机遇。 今天&#…

ctfshow(162)--文件上传漏洞--远程文件包含

Web162 进入界面&#xff1a; 思路 先传个文件测试一下过滤&#xff1a; 过滤了特别多符号&#xff0c;注意过滤了点. 我们的思路还是要先上传.user.ini文件: //修改前 GIF89a auto_prepend_fileshell.png//由于过滤了点&#xff0c;所以修改为 GIF89a auto_prepend_file…

学习threejs,导入COLLADA(.DAE)格式的模型

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.ColladaLoader DAE模…

HTB:PermX[WriteUP]

目录 连接至HTB服务器并启动靶机 1.How many TCP ports are listening on PermX? 使用nmap对靶机TCP端口进行开放扫描 2.What is the default domain name used by the web server on the box? 使用curl访问靶机80端口 3.On what subdomain of permx.htb is there an o…