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

uView1.0的Upload组件上传图片

<template><u-uploadref="uUpload":file-list="fileList"accept="image/jpeg,image/png"    //允许选择图片文件:sizeType="sizeType":max-size="2 * 1024 * 1024"    //限制上传的图片文件最大为 2M@oversize="oversize"@on-remove="deleteImgs"    //移除:auto-upload="false"    //禁止自动上传选择的图片文max-count="9"     //限制最多只能选择几个图片文件       :show-progress="false"     //不显示文件上传进度条multiple    //多图:previewFullImage="true"    //预览图片时显示完整的原图@on-choose-complete="onChooseComplete">
</u-upload>
</template>
<script>export default {data() {return {fileList: [], //文件列表}},methods: {// 文件超出大小限制oversize() {uni.showToast({title: "图片最大不能超过2M",icon: 'none'})},onChooseComplete(event) {this.multipleUpload(this.$refs.uUpload.lists, 2)},// 多张图片上传multipleUpload(event, type) {let num = 9;event.map(item => {if (num === event.length) {uni.showToast({title: '最多上传9张图片',icon: 'none'})return}num += 1this.uploadDo(item, type)})},uploadDo(event, type) {uni.uploadFile({url: "http://192.168.2.105:18100/file/uploadFile",//仅为示例,非真实的接口地址filePath: event.file.path,name: "file",header: {Authorization: `Bearer  +uni.getStorageSync("token")`,},success: (res) => {let resp = JSON.parse(res.data);this.form.voucherPictureUrls.push(resp.data);},});},//删除图片deleteImgs(index, lists, name) {},}
</script>

uploadDo(event, type) {

   console.log(event, "event");        //上传图片事件
      uni.uploadFile({
        url: "http://192.168.2.105:18100/file/uploadFile",//仅为示例,非真实的接口地址
        filePath: event.file.path,
        name: "file",
        header: {
          Authorization: `Bearer  +uni.getStorageSync("token")`, //要添加header否则接口不能调用
        },
        success: (res) => {

         console.log(res, "res");

          //如果上传成功打印下res,看有没有调用接口以及图片上传回显
          let resp = JSON.parse(res.data);
          this.form.voucherPictureUrls.push(resp.data);
        },
      });
    },

相关文章:

uView1.0的Upload组件上传图片

<template><u-uploadref"uUpload":file-list"fileList"accept"image/jpeg,image/png" //允许选择图片文件:sizeType"sizeType":max-size"2 * 1024 * 1024" //限制上传的图片文件最大为 2Moversize"over…...

【LeetCode题目详解】第九章 动态规划part03 343. 整数拆分 96.不同的二叉搜索树 (day41补)

本文章代码以c为例&#xff01; 一、力扣第343题&#xff1a;整数拆分 题目&#xff1a; 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 示例 1: 输…...

半导体制造常用软件工具总结

半导体制造常用软件工具总结 CIM&#xff1a;Computer Integrated Manufacturing 设备自动化&#xff0c;总称MES&#xff1a;Manufacturing Execution System 制造执行系统EAP&#xff1a;Equipment Automation Programming 设备自动化&#xff0c;是MES与设备的桥梁APC&…...

基于Python的IOS自动化测试环境搭建

文章目录 一、测试架构介绍1.1 WebDriverAgent原理分析1.2 tidevice原理分析二、环境安装2.1 iOS 设备安装 WebDriverAgent2.2 安装iTunes2.3 安装tidevice2.4 安装facebook-wda自动化三、操作流程四、Weditor的安装和使用一、测试架构介绍 以下为测试架构原理图 手机端的WDA…...

技术领导力实战笔记25

25&#xff5c;用心做好“鼓励式”管理 激发正能量 授权 分工作&#xff1a; 老人干新事&#xff0c;新人干老事&#xff0c;强者干难事&#xff0c;弱者干细事 新人干老事 所谓新人&#xff0c;是对业务产品不了解&#xff0c;对工作流程不清晰的岗位新人。对于新人来说&…...

设计模式-职责链+反射

文章目录 前言简单版本的职责链加反射职责链反射思路过程总结 前言 最近学习设计模式对于职责链的学习有了一些深入的了解故此有了这篇博客 简单版本的职责链加反射 职责链模式&#xff08;Chain of Responsibility Pattern&#xff09;和反射&#xff08;Reflection&#x…...

Middleware ❀ Kafka功能与使用详解

文章目录 1. 概述1.1. 消息队列1.2. 应用场景1.3. 工作模式1.4. 基础结构1.4.1. 结构组件1.4.2. 数据同步1.4.3. ACK机制1.4.4. 分区机制1.4.4.1. 使用Partition Key写入1.4.4.2. 轮询写入 - 默认规则1.4.4.3. 指定Partition写入 1.4.5. Offset偏移量1.4.5.1. 消息顺序性1.4.5.…...

python3.11教程1:python基础语法、程序控制、函数

文章目录 一、Python简介1.1 为什么学习python1.2 python安装与配置1.3 python解释器1.4 命令行参数1.4.1 sys.argv变量1.4.2 -c和-m选项 1.5 解释器的运行环境1.5.1 编码格式1.5.2 编码声明 二、Python基础语法2.1 行结构2.2 变量&#xff08;标识符&#xff09;2.3 字节串2.4…...

【C++】关于using namepace xxx 使用命名空间和冲突

官方定义 namespace是指 标识符的各种可见范围。命名空间用关键字namespace来定义。 命名空间是C的一种机制&#xff0c;用来把单个标识符下的大量有逻辑联系的程序实体组合到一起。此标识符作为此组群的名字。 基本使用 编译及执行命令&#xff1a; g test.cpp -o test ./…...

Linux常用命令——cupsenable命令

在线Linux命令查询工具 cupsenable 启动指定的打印机 补充说明 cupsenable命令用于启动指定的打印机。 语法 cupsenable(选项)(参数)选项 -E&#xff1a;当连接到服务器时强制使用加密&#xff1b; -U&#xff1a;指定连接服务器时使用的用户名&#xff1b; -u&#xff…...

基于Stable Diffusion的AIGC服饰穿搭实践

本文主要介绍了基于Stable Diffusion技术的虚拟穿搭试衣的研究探索工作。文章展示了使用LoRA、ControlNet、Inpainting、SAM等工具的方法和处理流程&#xff0c;并陈述了部分目前的实践结果。通过阅读这篇文章&#xff0c;读者可以了解到如何运用Stable Diffusion进行实际操作&…...

【 ARMv9 Cluster BUS QoS 配置】

文章目录 ARM Cluster QoS ARM Cluster QoS QoS&#xff08;Quality of Service&#xff0c;服务质量&#xff09;在 ARM 架构中&#xff0c;主要指的是一种机制&#xff0c;它可以控制和管理系统资源&#xff08;如内存、总线带宽等&#xff09;的使用&#xff0c;以满足各种…...

简单了解网络基本概念

目录 一、网络含义 二、什么是以太网&#xff1f; 三、网络分类 四、网络架构 五、数据传输方式 六、双工模式 一、网络含义 在实际生活中我们用传输介质把独立的终端设备相互连接起来就构成了网络。 二、什么是以太网&#xff1f; 以太网是一种网络通信协议标准&#…...

网络安全知识库

0x00 前言 本篇用来整理所有的零散的知识&#xff0c;作为一个技能树或者技能表来进行引导 CTF 加解密合集CTF Web合集 0x01 Http 1.http头 1.1 本地访问识别 如何伪造http头&#xff0c;让后端认为是本地访问...

无涯教程-JavaScript - FLOOR函数

描述 FLOOR函数将数字向下舍入为零,直到最接近的有效倍数。 语法 FLOOR (number, significance)争论 Argument描述Required/OptionalNumberThe numeric value you want to round.RequiredSignificanceThe multiple to which you want to round.Required Notes 如果数字的符…...

【LeetCode-中等题】146. LRU 缓存

文章目录 题目方法一&#xff1a;直接继承LinkedHashMap调用api方法二&#xff1a;自定义LinkedHashMap HashMap ListNode LinkedHashMap 题目 LRU缓存是什么&#xff1a;LRU缓存机制&#xff0c;你想知道的这里都有 实现 LRU 缓存算法 方法一&#xff1a;直接继承Linked…...

表白墙程序

目录 一、页面代码部分 二、设计程序 二、实现 doPost​编辑 三、实现 doGet 四、前端代码部分 五、使用数据库存储数据 一、页面代码部分 在之前的一篇博客中&#xff0c;已经写过了表白墙的页面代码实现&#xff0c;这里就不再重复了 页面代码如下&#xff1a; <!…...

git 本地仓库关联到远程仓库

将本地仓库关联到远程仓库 方式一&#xff1a;远程仓库没有文件 第一步&#xff1a; git init&#xff08;初始化git仓库&#xff09; 第二步&#xff1a; git remote add 地址&#xff08;设置remote地址&#xff09; 第三步&#xff1a; git add . &#xff08;将所有变…...

Introducing Language Guidance in Prompt-based Continual Learning

本文是LLM系列文章&#xff0c;针对《Introducing Language Guidance in Prompt-based Continual Learning》的翻译。 基于提示的持续学习中引入语言指导 摘要1 引言2 相关工作3 背景4 基于提示的持续学习语言指导5 实验6 结论 摘要 持续学习旨在学习一系列任务的单一模型&am…...

Matlab(数值微积分)

目录 1.多项式微分与积分 1.1 微分 1.2 多项式微分 1.3 如何正确的使用Matlab? 1.3.1 Matlab表达多项式 1.3.2 polyval() 多项式求值 1.3.3 polyder()多项式微分 1.4 多项式积分 1.4.1 如何正确表达 1.4.2 polyint() 多项式积分 2.数值的微分与积分 2.1 数值微分 2…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...