uniapp使用uviews上传多张图片

uniapp使用uviews上传多张图片,出现获取的图片路径重复了,是因为放在了onchange中了,解决方法

	<u-upload :auto-upload="true" :action="action" :header="imgheader" :file-list="fileList"@on-remove="delimg" max-count="9" @on-choose-complete="upimgchoose" :custom-btn="true" > <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"><u-icon name="photo" size="60"></u-icon></view></u-upload> 
upimgchoose(lists, name) {this.imglist = lists// this.imglist = this.imglist.filter(item => item.url.startsWith('http://tmp/'))//为了添加的时候二次添加图片,获取的路径和第一次添加的路径不同,过滤第二次的路径this.imglist = this.imglist.filter(item => item.url.startsWith('wxfile://tmp'))this.fupimg(this.imglist)},
fupimg(lists) {console.log(lists, '选择的')let that = thisuni.request({url: that.configURL.BaseURL + 'XXX',header: {'apply-secret': that.configURL.secret,'Authorization': 'Bearer ' + uni.getStorageSync('dsshopApplytoken')},method: 'post',async success(response) {console.log(response)let datas = response.data.message;let uploadPromises = []if (!that.edit) {//添加的时候修改照片,将之前上传的清空,否则会累积that.form.imgs = []}for await (const item of lists) {await uploadPromises.push(await that.uploadImage(datas.host, item.url, datas));}console.log(that.form, 'that.formthat.form')},fail(res) {that.$api.msg(res.message);return false}})},
uploadImage(apiUrl, filePath, datas) {return new Promise((resolve, reject) => {let that = thisconst tempFilePath = filePath; // 获取第一张选定的图片的临时路径// 利用字符串操作函数 split()、lastIndexOf() 等来提取图片的后缀const lastDotIndex = tempFilePath.lastIndexOf('.'); // 查找最后一个点号的位置let fileExtension;if (lastDotIndex !== -1 && lastDotIndex < tempFilePath.length - 1) {fileExtension = tempFilePath.substring(lastDotIndex); // 提取点号之后部分作为后缀 } else {that.$api.msg('未能正确提取图片后缀!');return}const date = new Date().getFullYear()const date1 = new Date().getMonth() + 1const date2 = new Date().getDate()const date3 = (new Date()).valueOf()const a = datas.dir + '/' + 'weidms' + '/' + date + '/' + date1 +'/' + date2 + '/' + date3 + fileExtensionconsole.log(filePath, 'filePath')uni.uploadFile({url: apiUrl,name: "file",filePath: filePath,formData: {key: a,policy: datas.policy,OSSAccessKeyId: datas.accessid,signature: datas.signature,// 'x-oss-security-token': securityToken // 使用STS签名时必传。},success: (rs) => {resolve(rs);if (rs.statusCode === 204) {that.form.imgs.push(datas.host + a)}},fail: (error) => {reject(error);},});});},
	delimg(e) {console.log(e, '删除的', this.imglist) this.form.imgs.splice(e, 1) },

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

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

相关文章

容器之事件盒

代码&#xff1a; #include <gtk-2.0/gtk/gtk.h> #include <glib-2.0/glib.h> #include <gtk-2.0/gdk/gdkkeysyms.h> #include <stdio.h>static void label_const(GtkWidget *eventbox) {static int i 0;static char citem[100];sprintf(citem, &quo…

【Unity学习笔记】第十八 基于物理引擎的日月地系统简单实现

转载请注明出处: https://blog.csdn.net/weixin_44013533/article/details/139701843 作者&#xff1a;CSDN|Ringleader| 目录 目标数学理论资源准备数据准备代码实现Unity准备效果展示注意事项后记 目标 目标&#xff1a;利用Unity的物理引擎实现 “日地月三体系统” 。 效果…

PHP转Go系列 | ThinkPHP与Gin的使用姿势

大家好&#xff0c;我是码农先森。 安装 使用 composer 进行项目的创建。 composer create-project topthink/think thinkphp_demo使用 go mod 初始化项目。 go mod init gin_demo目录 thinkphp_demo 项目目录结构。 thinkphp_demo ├── LICENSE.txt ├── README.md …

【干货】微信小程序免费开源项目合集

前言 2024年了&#xff0c;还有小伙伴在问微信小程序要怎么开发&#xff0c;有什么好的推荐学习项目可以参考的。今天分享一个收集了一系列在微信小程序开发中有用的工具、库、插件和资源&#xff1a;awesome-github-wechat-weapp。 开源项目介绍 它提供了丰富的资源列表&…

day01-Numpy的安装

numpy的安装 同样&#xff0c;anaconda内置有Numpy包 Numpy是用c语言实现的&#xff0c;运算速度比python快得多 import numpy as np np.__version__out: 1.18.5使用Jupyter编辑器打印numpy包的版本 NumPy ndarray对象 NumPy定义了一个n维数组对象&#xff0c;简称ndarra…

js浅拷贝和深拷贝的区别

JavaScript中的浅拷贝和深拷贝的主要区别在于它们如何处理引用类型的数据。 浅拷贝仅复制对象的引用&#xff0c;而不复制对象本身。这意味着新旧对象共享同一块内存空间。因此&#xff0c;如果修改了原始对象&#xff0c;复制的对象也会相应地改变&#xff0c;因为它们实际上是…

利用LabVIEW和机器学习实现无规律物体识别

针对变化无规律的物体识别&#xff0c;LabVIEW结合机器学习算法提供了一种高效的解决方案。介绍如何使用LabVIEW编程实现此功能&#xff0c;包括所需工具包、算法选择和实现步骤&#xff0c;帮助开发者在无规律的复杂环境中实现高精度的物体识别。 1. 项目概述 无规律物体的识…

诺瓦星云入职认知能力SHL测验Verify职业性格问卷OPQ可搜索带解析求职题库

欢迎您开启诺瓦星云的求职旅程 恭喜您进入测评环节&#xff0c;接下来您需要作答两个测验&#xff0c;分别是职业性格问卷OPQ和认知能力测验Verify&#xff0c;总共用时大约1小时&#xff0c;祝您作答顺利! 【华东同舟求职】由资深各行业从业者建立的一站式人才服务网络平台&a…

Day1:二分查找704 移除元素27

题目链接704. 二分查找 - 力扣&#xff08;LeetCode&#xff09; int search(vector<int>& nums, int target) {int left 0;int right nums.size() - 1;int mid (right - left) / 2;while (left < right){if (target nums[mid]){return mid;}else if (target …

docker换源

文章目录 前言1. 查找可用的镜像源2. 配置 Docker 镜像源3. 重启 Docker 服务4. 查看dock info是否修改成功5. 验证镜像源是否更换成功注意事项 前言 在pull镜像时遇到如下报错&#xff1a; ┌──(root㉿kali)-[/home/longl] └─# docker pull hello-world Using default …

react-router-dom 6.4版本的尝鲜和总结

1. 版本概述 1.1 版本发布背景 React Router 6.4 版本是继6.0大版本更新之后的又一重要里程碑。此版本发布于2024年&#xff0c;旨在进一步优化开发者体验&#xff0c;提供更加强大和灵活的路由功能。6.4版本在前一版本的基础上&#xff0c;引入了新的数据抽象&#xff0c;增…

力扣372. 超级次方

Problem: 372. 超级次方 文章目录 题目描述思路复杂度Code 题目描述 思路 1.处理数组指数&#xff1a;如下图可以将其转换为一个递归的操作 2.处理 mod 运算:对于模运算我们有公式&#xff1a; ( a b ) % k ( a % k ) ( b % k ) % k (a \times b) \% k (a \% k) \times (b…

Zookeeper原理

Zookeeper监听原理 监听原理详解 &#xff08;1&#xff09;首先要有一个main()线程 &#xff08;2&#xff09;在main线程中创建Zookeeper客户端&#xff0c;这时就会创建两个线程&#xff0c;一个负责网络连接通信(connet)&#xff0c;一个负责监听(listener) 。 &#xf…

使用Qt Creator时遇到错误“Project ERROR: Xcode not set up properly”的解决方案

最近我在macOS上首次安装了Qt 5.5&#xff0c;并使用Qt Creator开发。然而每次启动或打开项目时&#xff0c;都会遇到以下错误提示&#xff1a; Project ERROR: Xcode not set up properly. You may need to confirm the license agreement by running /usr/bin/xcodebuild.然…

PriorityQueue优先队列详解

PriorityQueue优先队列详解 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来详细讲解一下Java中非常重要的数据结构之一——PriorityQueue优先队列。P…

Docker 容器操作命令

文章目录 前言1. 创建并运行容器2. 列出容器3. 停止容器4. 启动已停止的容器5. 重启容器6. 进入容器7. 删除容器8. 查看容器日志9. 导出和导入容器10. 管理网络11. 数据卷操作12. 设置容器自启动 前言 Docker 容器操作是 Docker 使用过程中非常重要的一部分。以下是一些常见的…

记录grid布局属性

grid布局 分为容器和项目元素 容器属性 #container{display:grid;grid-template-columns:100px 100px 100px;/* 1fr 表示比例为占1份 */grid-template-columns:1fr 100px 1fr;/*100px为1列,自动填充,容器宽度不足则换行*/grid-template-columns:repeat(auto-fill,100px);/* …

Unity处理Socket粘包拆包

现在游戏协议的数据格式基本上都是用protobuf协议格式&#xff0c;而protobuf最后会转换为二进制&#xff0c;所以这个例子实现的逻辑的也是二进制的处理。 处理粘包拆包的逻辑主要是在DecodePackage方法中。 using System; using System.Collections; using System.Collecti…

2.XSS-存储型

储存型XSS 或持久型 XSS 交互的数据会被存在在数据库里面,永久性存储,具有很强的稳定性。 在留言板里面进行测试一下是否有做过滤 "<>?&66666点击提交 查看元素代码&#xff0c;已经提交完成&#xff0c;并且没有做任何的过滤措施 接下来写一个javascrip…

select实现超时保护机制

1、使用channel优雅地关闭服务 package mainimport ("context""fmt""net/http""os""os/signal""syscall""time" )func IndexHandler(w http.ResponseWriter, r *http.Request) {if r.Method ! http.Me…