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

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.kler.cn/a/386811.html

相关文章:

  • IC 脚本之python
  • OceanStor Pacific系列 8.1.0 功能架构
  • vscode远程连接服务器并启用tmux挂载进程
  • 半导体企业如何利用 Jira 应对复杂商业变局?
  • 《TCP/IP网络编程》学习笔记 | Chapter 8:域名及网络地址
  • Spring MVC 与 JSP 数据传输
  • I.MX6U 裸机开发5.准备C环境并用C语言控制LED
  • 数据血缘追踪是如何在ETL过程中发挥作用?
  • 23-Update by Query Reindex
  • cv::intersectConvexConvex返回其中一个输入点集,两个点集不相交
  • Windows 11 安装 MySQL 8.4 LTS 详细安装配置教程(入门篇)
  • linux基础——详细篇
  • React diff算法和Vue diff算法的主要区别
  • PICO+Unity MR视频透视
  • 分组校验在Spring中的应用详解
  • 九、Go语言快速入门之map
  • Leetcode刷题
  • 层出不穷的大模型产品,你怎么选?
  • 基于大语言模型的规划
  • 【Redis】缓存击穿与缓存雪崩:问题与解决方案
  • 网络原理(应用层)->HTTP
  • ArcGIS Pro SDK Addin-DAML
  • 十六 MyBatis使用PageHelper
  • 【韩老师零基础30天学会Java 】03章 变量
  • selenium大量并发连接驱动超时
  • sealos部署K8s,安装docker时master节点突然NotReady