uniapp uview文件上传的文件不是文件流,该如何处理?用了uni.chooseImage预览功能要如何做

news2024/11/19 0:38:10

在使用uniapp开发,运用的ui是用uview,这边需要做一个身份认证,如下图
在这里插入图片描述
使用的是uview的u-upload组件,可是这个组件传给后端的不是文件流
在这里插入图片描述
后端接口需要的是文件流格式,后面使用了uniapp的选择图片或者拍照的api,api地址

uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: (res) => {
          console.log('res',res)
        },
      });

在这里插入图片描述
在这里插入图片描述
uview的是返回的文件信息是对象格式,uni.chooseImage返回的是文件流格式

下面我们来解决预览问题,把uview的u-upload组件跟uni.api合着用,代码如下

// 选择图片方法
onDiscernHandle() {
      if (this.fileList.length !== 0) {
        return false;
      }
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: (res) => {
          this.fileList.push({
            url: res.tempFiles[0].path,
            file: res.tempFiles[0],
          });
        },
      });
    },
// 删除图片
    deletePic(event) {
      this.fileList = [];
    },
<view class="page-container1-face-image" @click="onDiscernHandle">
          <u-upload
            :fileList="fileList"
            @delete="deletePic"
            name="1"
            multiple
            :maxCount="1"
            accept="image"
            :capture="['camera']"
            class="operate-upload"
            :previewFullImage="true"
            :disabled="true"
          >
            <u--image
              :showLoading="true"
              :src="imgs.square"
              width="250rpx"
              height="250rpx"
            ></u--image>
          </u-upload>
        </view>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Sentaurus TCAD 频繁跳出窗口

软件提示激活窗口&#xff0c;想要永久去掉这个窗口&#xff0c;需要进入root权限后复制下面的代码&#xff0c;然后回车运行 sed -i “s|enabled1|enabled0|g” /etc/yum/pluginconf.d/fastestmirror.conf mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Bas…

Redis主从复制、哨兵机制、集群分片

一.主从复制 1.概述 主从复制&#xff0c;是指将一台Redis服务器的数据&#xff0c;复制到其他的Redis服务器。前者称为主节点(master)&#xff0c;后者称为从节点(slave)。 数据的复制是单向的&#xff0c;只能由主节点到从节点。默认情况下&#xff0c;每台Redis服务器都是主…

变透明的黑匣子:UCLA 开发可解释神经网络 SNN 预测山体滑坡

内容一览&#xff1a;由于涉及到多种时空变化因素&#xff0c;山体滑坡预测一直以来都非常困难。深度神经网络 (DNN) 可以提高预测准确性&#xff0c;但其本身并不具备可解释性。本文中&#xff0c;UCLA 研究人员引入了 SNN。SNN 具有完全可解释性、高准确性、高泛化能力和低模…

vue3 vant组件的引入方式

vue3中如何使用vant组件 创建项目及环境&#xff1a;vue3 ts vite 一、全局组件全部引用 注意&#xff1a;配置 unplugin-vue-components 插件后&#xff0c;将不允许以这种方式导入组件 1.安装vant 在项目目录下运行 npm i vant // Vue 3 项目&#xff0c;安装最新版 Va…

【雕爷学编程】Arduino动手做(180)---Seeeduino Lotus开发板3

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…

大数据学习教程:Linux 高级教程(上)

一、Linux用户与权限 1. 用户和权限的基本概念 1.1、基本概念 用户 是Linux系统工作中重要的一环, 用户管理包括 用户 与 组 管理 在Linux系统中, 不论是由本级或是远程登录系统, 每个系统都必须拥有一个账号, 并且对于不同的系统资源拥有不同的使用权限 对 文件 / 目录 的…

【Linux学习】日积月累——进程控制

一、进程创建 1.1 fork函数的认识 #include<unistd.h> pid_t fork(void); 返回值&#xff1a;自进程返回0&#xff0c;父进程返回子进程PID&#xff0c;出错返回-1进程调用fork&#xff0c;当控制转移到内核中的fork代码后&#xff0c;内核做&#xff1a;分配新的内存块…

英语不好能学好Python吗?Python常用英文单词汇总

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 有些小可爱对英语好不好对学习python有没有什么影响有着很深的疑惑。 其实python学习&#xff0c;主要靠多敲多练&#xff0c;主打一个熟能生巧 那今天我就给大家带来Python常用英文单词汇总&#xff0c; 新手期小可…

关于领导要求logback日志时间格式要求为“年-月-日 时:分:秒,毫秒”

今天接到领导邮件要求整改系统输出日志规范&#xff0c;有一条要求调整输出日志时间格式为标题所述格式&#xff0c;例&#xff1a;2022-02-21 14:13:32,489 项目目前logback.xml里的配置是这样&#xff1a; <pattern>%d{yyyyMMdd hh:mm:ss} [%p][%c][%M][%L]-> %m%…

docker容器所有操作、创建私有仓库

目录 一、创建容器与运行容器 1、创建容器 2、启动容器&#xff08;后面加镜像:标签或者唯一ID都可以&#xff09; 3、容器的运行与终止 4、容器的进入 5、容器的导出与导入 6、容器的删除 7、文件复制 8、查看容器资源使用率 9、查看容器进程状态 10、更新容器配置 …

捷码低代码|5种常见的布局组件介绍!

在捷码中亲自体验&#xff0c;学习效果更好&#xff01;没有账号的&#xff0c;点击免费获得账号&#xff1a;http://dev.gemcoder.com/front/development/index.html#/login 本文会介绍五种布局组件&#xff0c;即流式布局、弹性布局、固定布局、多行多列布局、Layout布局。 一…

喜讯! WorkPlus入选中国信通院数字产品“2023全景图”!

“2023数字生态发展大会”暨中国信通院“铸基计划” WorkPlus喜讯 7月27日&#xff0c;中国信息通信研究院&#xff08;下称“中国信通院”&#xff09;主办的“2023数字生态发展大会”暨中国信通院“铸基计划”年中会议在京召开&#xff0c;大会全面地总结了“铸基计划”上半…

企业优化效率,进行数据在线管理是不二选择

如今商业环境的竞争是愈发激烈了起来&#xff0c;企业优化效率成为了提高竞争力和发展壮大的关键。数据与图文档管理是企业运营中不可或缺的一环&#xff0c;传统管理方式已不适应快速变化的市场需求和多样化的业务流程。而在线图文档管理结合BOM系统作为企业数字化管理的不二选…

无涯教程-Lua - repeat...until 语句函数

与 for 和 while 循环(它们在循环顶部测试循环条件)不同&#xff0c;Lua编程中的 repeat ... until 循环语言在循环的底部检查其条件。 repeat ... until 循环与while循环相似&#xff0c;不同之处在于&#xff0c;保证do ... while循环至少执行一次。 repeat...until loop - …

openGauss学习笔记-28 openGauss 高级数据管理-NULL值

文章目录 openGauss学习笔记-28 openGauss 高级数据管理-NULL值28.1 IS NOT NULL28.2 IS NULL openGauss学习笔记-28 openGauss 高级数据管理-NULL值 NULL值代表未知数据。无法比较NULL和0&#xff0c;因为它们是不等价的。 创建表时&#xff0c;可以指定列可以存放或者不能存…

AI绘画| 迪士尼风格|可爱头像【附Midjourney提示词】

Midjourney案例分享 图片预览 迪士尼风格&#xff5c;可爱头像 高清原图及关键词Prompt已经放在文末网盘&#xff0c;需要的自取 在数字艺术的新时代&#xff0c;人工智能绘画已经迅速崭露头角。作为最先进的技术之一&#xff0c;AI绘画结合了艺术和科学&#xff0c;开启了一…

WPF上位机6——文件操作、多线程

文件操作 文件夹操作 创建文件夹 磁盘信息 文件的读写 文件流 Thread多线程 带参数创建线程 Task多线程 创建方式1 第一种 第二种 第三种&#xff1a;线程池的方式 前台与后台线程

开源SCRM营销平台MarketGo-客户群裂变

一、概述 随着互联网社交的普及&#xff0c;企业通过社交渠道进行营销已经成为一种不可或缺的营销手段。在企微SCRM社交媒体营销模式中&#xff0c;基于留存用户做快速的拉取新客户的方式&#xff0c;叫裂变活动&#xff0c;下面我们就基于客户群裂变的概念、特点和方法做简单…

基于C#制作一个串口通信调试软件

串口调试软件是一种用于调试和监测串口通信的工具软件。它可以帮助用户通过串口与外部设备进行通信,并实时显示发送和接收的数据,方便用户进行数据的分析和调试。 串口知识了解什么是串口通信原理波特率数据位停止位奇偶校验位RS-232标准合格的通信软件应具备的特点实现步骤界…

css实现文字颜色渐变+阴影

效果 代码 <div class"top"><div class"top-text" text"总经理驾驶舱">总经理驾驶舱</div> </div><style lang"scss" scoped>.top{width: 100%;text-align: center;height: 80px;line-height: 80px;fo…