当前位置: 首页 > 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>

http://www.lryc.cn/news/477535.html

相关文章:

  • 【计算机科学】位运算:揭开二进制世界的奥秘
  • 弹性裸金属服务器和传统裸金属服务器有什么区别?
  • shodan(五)连接Mongodb数据库Jenkinsorg、net、查看waf命令
  • ThingsBoard规则链节点:Push to Edge节点详解
  • 基于 EventBridge + DashVector 打造 RAG 全链路动态语义检索能力
  • 【golang/navmesh】使用recast navigation进行寻路
  • 【软考】Redis不同的数据类型和应用场景。
  • java 对人名和电话 脱敏-replaceAll
  • 计算机网络:网络层 —— 网络地址转换 NAT
  • 【Pikachu靶场:XSS系列】xss之过滤,xss之htmlspecialchars,xss之herf输出,xss之js输出通关啦
  • 面向制造和装配的产品设计指南(二):面向装配的设计指南
  • Python中的PDF处理工具:PyPDF2和ReportLab使用指南
  • 【vxe-table】多选筛选项对列表的列进行动态的显示与隐藏
  • 微信小程序uniapp+vue飞机订票航空售票系统
  • 如何取消Outlook中的循环会议
  • Docker-- cgroups资源控制实战
  • 使用Python和Vosk库实现语音识别
  • stm32使用串口的轮询模式,实现数据的收发
  • 105. UE5 GAS RPG 搭建主菜单
  • 基于 JAVASSM(Java + Spring + Spring MVC + MyBatis)框架开发一个医院挂号系统
  • Golang | Leetcode Golang题解之第540题有序数组中的单一元素
  • 影刀RPA实战:嵌入python,如虎添翼
  • es 数据清理delete_by_query
  • 【每日 C/C++ 问题】
  • stm32学习4
  • Midjourney国内直登
  • 【双目视觉标定】——3面结构光相机标定实践(获取相机内参)~未完待续
  • Python常用脚本集锦
  • MacBook 如何设置打开json格式文件的默认程序是vs code
  • 如何在 Spring Boot 中实现多数据源的事务管理?