uniapp中的uni-file-picker组件上传多张图片到服务器

由于在uniapp官方文档中的uni-file-picker组件可实现图片上传功能,默认的是上传到自带的服务,所以我们要修改成自己的服务器

1. 添加  :auto-upload="false"   加上这个取消自动上传

<uni-file-picker v-model="jobAddUpdateForm.imageList" :auto-upload="false"  fileMediatype="image" limit="9" :image-styles="imageStyles" @select="successData">
</uni-file-picker>

2.vue2 封装mixin (vue3 可以封装 hooks) 方便后期调用

import config from '@/config';
import {getToken
} from '@/utils/auth'; // 导入获取 token 的函数  // 上传图片的异步函数  
const uploadImg = async function(tempFilePaths) {const baseUrl = config.baseUrl; // 基础 URL 从配置中获取  const token = getToken(); // 使用 getToken 函数获取 token  const successfulUploads = []; // 数组用于记录所有成功上传的文件路径  if (!tempFilePaths.length) return []; // 如果没有选择图片就退出,返回空数组  // 遍历选择的图片路径  for (const path of tempFilePaths) {try {// 调用接口上传每一张图片  const [err, {data}] = await uni.uploadFile({url: `${baseUrl}/common/upload`, // 自己的后台地址  filePath: path,name: 'file',header: { // 添加请求头  'Authorization': `Bearer ${token}`, // 假设你使用的是 Bearer 认证  // 可以添加其他需要的请求头  },});// 处理错误情况  if (err) {console.error('上传错误:', err);continue; // 如果上传出错,继续上传下一张图片  }// 把返回的数据转为对象格式  const dataObj = JSON.parse(data); console.log(dataObj)// 将每个上传成功的文件路径添加到数组中  successfulUploads.push(dataObj); // 假设 dataObj.data 是上传后的文件路径  } catch (error) {console.error('处理上传时发生错误:', error);continue; // 捕获上传错误并继续  }}// 返回所有成功上传的文件路径  return successfulUploads;
};// 导出 uploadImg 函数  
export default uploadImg;

需要注意的是 请求的url ,需要换成自己的接口地址

3. 在使用的地方引入就可以了

import uploadImg from '@/mixin/imageData.js';// 上传接口async successData(e){const res = await uploadImg.call(this, e.tempFilePaths)console.log(res)
}

就可以返回上传的信息了

参考:uniapp中的uni-file-picker组件上传多张图片到服务器,可添加,预览,删除图片_uni-file-picker详细使用教学-CSDN博客

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

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

相关文章

基于Spring Boot的雅苑小区管理系统

一、系统背景与意义 随着信息化技术的快速发展&#xff0c;传统的小区物业管理方式已经难以满足现代居民对于高效、便捷服务的需求。因此&#xff0c;开发一款基于Spring Boot的小区管理系统显得尤为重要。该系统旨在通过信息化手段&#xff0c;实现小区物业管理的智能化、自动…

Redis篇-19--运维篇1-主从复制(主从复制,读写分离,配置实现,实战案例)

1、概述 Redis的主从复制&#xff08;Master-Slave Replication&#xff09;是一种数据冗余机制&#xff0c;它允许将一台Redis服务器的数据复制到其他Redis服务器。在主从复制中&#xff0c;有一台主服务器&#xff08;Master&#xff09;和一个或多个从服务器&#xff08;Sl…

【ELK】Filebeat采集Docker容器日志

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 介绍filebeat是如何工作的 使用部署filebeat 介绍 Filebeat 是一个用于转发和集中日志数据的轻量级传送器。 Filebeat 作为agent安装在服务器上&#xff0c;监视指…

C缺陷与陷阱 — 8 编译与链接

目录 1 程序的编译过程 2 动态链接的优缺点 2.1 动态链接的优点 2.2 动态链接的缺点 2.3 只使用动态链接 3 函数库链接的5个特殊秘密 4 警惕Interpositioning 5 产生链接器报告文件 1 程序的编译过程 程序的编译过程是将源代码转换成计算机可以执行的机器代码的过程。…

QT c++ 测控系统 一套报警规则(上)

本文适用于pc based的测控系统的上位机&#xff0c;定义了一套报警规则。 由5个部分组成&#xff1a;自定义4布尔类、在全局文件定义工位错误结构体和结构体变量&#xff0c;其它地方给此变量的当前值成员赋值&#xff0c;报警线程类、数据库保存类、弹框类。 1.自定义4布尔类…

作业Day4: 链表函数封装 ; 思维导图

目录 作业&#xff1a;实现链表剩下的操作&#xff1a; 任意位置删除 按位置修改 按值查找返回地址 反转 销毁 运行结果 思维导图 作业&#xff1a;实现链表剩下的操作&#xff1a; 1>任意位置删除 2>按位置修改 3>按值查找返回地址 4>反转 5>销毁 任意…

WebSocket入门与结合redis

WebSocket是什么 WebSocket 是一种用于在客户端和服务器之间建立双向通信的协议&#xff0c;它能实现实时、持久的连接。与传统的 HTTP 请求响应模式不同&#xff0c;WebSocket 在建立连接后允许客户端和服务器之间相互发送消息&#xff0c;直到连接关闭。由于 WebSocket 具有…

WSL Ubuntu

文章目录 1. 概述1.1 什么是适用于 Linux 的 Windows 子系统1.2 什么是 WSL 21.3 WSL 2 中的新增功能1.4 比较 WSL 2 和 WSL 1 2. 参考资料3. 修改存储位置4. 网络访问 1. 概述 1.1 什么是适用于 Linux 的 Windows 子系统 适用于 Linux 的 Windows 子系统可让开发人员按原样运…

unity接入coze智能体

官网链接 coze智能体创建、设置 点击创建–选着智能体&#xff0c;随便起一个名字&#xff0c;就可以了 添加令牌 把随便起一个名字&#xff0c;设置时间&#xff0c;把所有选项都勾选上&#xff0c;一定要勾选所有团队空间&#xff0c;否则无法点击确定。 点击确定后&a…

基于51单片机的交通灯设计—夜间、紧急、复位、可调时间、四个数码管显示

基于51单片机的交通灯设计 &#xff08;仿真&#xff0b;程序&#xff0b;原理图&#xff0b;PCB&#xff0b;设计报告&#xff09; 功能介绍 具体功能&#xff1a; 1、采用四方向数码管设计&#xff0c;更加符合真实的交通信号灯设计&#xff1b; 2、左侧按键从上到下依次为…

省略内容在句子中间

一、使用二分查找法 每次查找时&#xff0c;将查找范围分成两半&#xff0c;并判断目标值位于哪一半&#xff0c;从而逐步缩小查找范围。 循环查找 计算中间位置 mid Math.floor((low high) / 2)。比较目标值 target 和中间位置的元素 arr[mid]&#xff1a; 如果 target ar…

Python:动态粒子爱心

预览 代码结构概述 这段代码使用了 pygame 库来创建一个动态的图形窗口&#xff0c;绘制一个心形图案&#xff0c;并在其中显示闪烁的文本。代码主要分为以下几个部分&#xff1a; 初始化和设置心形曲线的计算粒子类的定义生成粒子文本设置主循环 1. 初始化和设置 import p…

springboot449教学资源共享平台(论文+源码)_kaic

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统教学资源共享平台信息管理难度大&#xff0c;容错率低&am…

DataOps驱动数据集成创新:Apache DolphinScheduler SeaTunnel on Amazon Web Services

引言 在数字化转型的浪潮中&#xff0c;数据已成为企业最宝贵的资产之一。DataOps作为一种文化、流程和实践的集合&#xff0c;旨在提高数据管道的质量和效率&#xff0c;从而加速数据从源头到消费的过程。白鲸开源科技&#xff0c;作为DataOps领域的领先开源原生公司&#xf…

【大模型】GraphRAG技术原理

核心概念 GraphRAG 的核心在于用大模型构建知识图谱知识图谱聚类社区化RAG RAG就是输入&#xff08;问题知识&#xff09;到大模型 1-大模型自动从海量数据中构建知识图谱&#xff08;提取合并实体关系&#xff09; 2-聚类算法从知识图谱中聚类社区并生成社区摘要 3-输入问题…

揭秘区块链隐私黑科技:零知识证明如何改变未来

文章目录 1. 引言&#xff1a;什么是零知识证明&#xff1f;2. 零知识证明的核心概念与三大属性2.1 完备性&#xff08;Completeness&#xff09;2.2 可靠性&#xff08;Soundness&#xff09;2.3 零知识性&#xff08;Zero-Knowledge&#xff09; 3. 零知识证明的工作原理4. 零…

王佩丰24节Excel学习笔记——第十二讲:match + index

【以 Excel2010 系列学习&#xff0c;用 Office LTSC 专业增强版 2021 实践】 【本章小技巧】 vlookup与match&#xff0c;index 相结合使用match,index 结合&#xff0c;快速取得引用的值扩展功能&#xff0c;使用match/index函数&#xff0c;结合照相机工具获取照片 一、回顾…

探秘C语言:从诞生到广泛应用的编程世界

引言 在编程的广袤天地里&#xff0c;C 语言宛如一颗璀璨的恒星&#xff0c;持久而耀眼地散发着光芒。自诞生以来&#xff0c;它就以独特的魅力和强大的功能&#xff0c;深深扎根于软件开发的各个层面。无论是构建复杂的操作系统&#xff0c;还是操控微小的嵌入式设备&#xff…

【Python】pandas库---数据分析

大学毕业那年&#xff0c;你成了社会底层群众里&#xff0c;受教育程度最高的一批人。 前言 这是我自己学习Python的第四篇博客总结。后期我会继续把Python学习笔记开源至博客上。 上一期笔记有关Python的NumPy数据分析&#xff0c;没看过的同学可以去看看&#xff1a;【Pyt…

常见异构程序设计语言

目录 一、OpenMP 二、MPI 三、CUDA/HIP 四、OpenACC 五、Athread 六、OpenCL 七、oneAPI 20世纪80年代&#xff0c;异构计算技术就已经诞生了。异构就是CPU、DSP、GPU、ASIC、协处理器、FPGA等各种计算单元、使用不同的类型指令集、不同的体系架构的计算单元&#xff0c…