uniapp中uploadFile的用法

基本语法

uni.uploadFile(OBJECT)

OBJECT 是一个包含上传相关配置的对象,常见参数如下:

参数类型必填说明
urlString开发者服务器地址。
filePathString要上传文件资源的本地路径。
nameString文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容。
headerObjectHTTP 请求 Header,Header 中不能设置 Referer。
formDataObjectHTTP 请求中其他额外的 form data。
successFunction接口调用成功的回调函数。
failFunction接口调用失败的回调函数。
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)。

使用示例

前端代码(uni-app)

以下代码实现了从本地选择图片并上传到服务器的功能。

// 选择图片并上传
uni.chooseImage({count: 1,success: function (res) {const tempFilePaths = res.tempFilePaths;uni.uploadFile({url: 'https://example.com/upload', // 替换为实际的后端接口地址filePath: tempFilePaths[0],name: 'file',header: {'Authorization': 'Bearer your_token'},formData: {'key1': 'value1','key2': 'value2'},success: function (uploadRes) {console.log('上传成功', uploadRes.data);},fail: function (err) {console.log('上传失败', err);}});}
});
代码解释
  1. 选择图片:使用 uni.chooseImage 方法从本地相册选择一张图片,获取其临时文件路径。
  2. 上传文件:调用 uni.uploadFile 方法,将选择的图片上传到指定的服务器地址。
    • url:指定后端服务器的接口地址。
    • filePath:图片的临时文件路径。
    • name:文件在表单中的字段名,后端通过该字段名获取文件。
    • header:设置请求头,可用于身份验证等。
    • formData:传递额外的表单数据。
后端代码示例(Node.js + Express + multer)
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.Map;@RestController
@RequestMapping("/api")
public class FileUploadController {@PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file,@RequestHeader("Authorization") String authorization,@RequestParam Map<String, String> formData) {if (file.isEmpty()) {return ResponseEntity.badRequest().body("文件为空,请选择文件上传");}try {// 共享文件夹路径String sharedFolderPath = "/mydata/app/doc/shouqian_file/";// 获取文件名String fileName = file.getOriginalFilename();// 构建目标文件路径Path targetPath = Paths.get(sharedFolderPath, fileName);// 创建共享文件夹(如果不存在)File sharedFolder = new File(sharedFolderPath);if (!sharedFolder.exists()) {if (!sharedFolder.mkdirs()) {return ResponseEntity.status(500).body("无法创建共享文件夹");}}// 将文件保存到共享文件夹Files.write(targetPath, file.getBytes());// 打印读取到的请求头和表单数据System.out.println("Authorization: " + authorization);System.out.println("Form Data: " + formData);return ResponseEntity.ok("文件上传成功");} catch (IOException e) {e.printStackTrace();return ResponseEntity.status(500).body("文件上传失败:" + e.getMessage());}}
}
代码解释
  • @RestController:表明这是一个 RESTful 风格的控制器。
  • @PostMapping:指定处理 POST 请求的路径为 /api/upload,并且指定请求的内容类型为 multipart/form-data
  • @RequestParam("file") MultipartFile file:用于接收上传的文件。
  • @RequestHeader("Authorization") String authorization:从请求头中获取 Authorization 字段的值。
  • @RequestParam Map<String, String> formData:以键值对的形式接收前端传递的 formData

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

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

相关文章

Android设计模式之责任链模式

一、定义&#xff1a; 使多个对象都有机会处理请求&#xff0c;从而避免了请求的发送者和接收者之间的耦合关系将这些对象连城一条链&#xff0c;并沿着这条链传递该请求&#xff0c;只到有对象处理它为止。 二、模式结构&#xff1a; 抽象处理者&#xff08;Handler&#xff…

Oracle数据库数据编程SQL<3.3 PL/SQL 游标>

游标(Cursor)是Oracle数据库中用于处理查询结果集的重要机制&#xff0c;它允许开发者逐行处理SQL语句返回的数据。 目录 一、游标基本概念 1. 游标定义 2. 游标分类 二、静态游标 &#xff08;一&#xff09;显式游标 【一】不带参数&#xff0c;普通的显示游标 1. 显式…

逗万DareWorks|创意重构书写美学,引领新潮无界的文创革命

当传统文具陷入同质化泥潭时&#xff0c;逗万DareWorks品牌犹如一颗璀璨的明星&#xff0c;以其独特的创意理念和卓越的产品品质&#xff0c;迅速赢得了广大消费者的青睐。 逗万DareWorks隶属于东莞司贸文教赠品有限公司&#xff0c;后者深耕制笔行业45年&#xff0c;占地4.6万…

写Prompt的技巧和基本原则

一.基本原则 1.一定要描述清晰你需要大模型做的事情&#xff0c;不要模棱两可 2.告诉大模型需要它做什么&#xff0c;不需要做什么 改写前: 请帮我推荐一些电影 改写后: 请帮我推荐2025年新出的10部评分比较高的喜剧电影&#xff0c;不要问我个人喜好等其他问题&#xff…

【React】基于 React+Tailwind 的 EmojiPicker 选择器组件

1.背景 React 写一个 EmojiPicker 组件&#xff0c;基于 emoji-mart 组件二次封装。支持添加自定义背景 、Emoji 图标选择&#xff01;并在页面上展示&#xff01; 2.技术栈 emoji-mart/data 、emoji-mart : emoji 图标库、元数据 tailwindcss: 原子化 CSS 样式库 antd : 组…

Qt中绘制不规则控件

在Qt中绘制不规则控件可通过设置遮罩&#xff08;Mask&#xff09;实现。以下是详细步骤: ‌继承目标控件‌&#xff1a;如QPushButton或QWidget。‌重写resizeEvent‌&#xff1a;当控件大小变化时&#xff0c;更新遮罩形状。‌创建遮罩区域‌&#xff1a;使用QRegion或QPain…

Parallel_Scheduling_of_DAGs_under_Memory_Constraints论文阅读

内存约束下的 DAG 并行调度 点击阅读原文语雀链接更清晰 摘要 科学工作流通常被建模为任务的有向无环图&#xff08;DAG&#xff09;&#xff0c;这些任务代表计算模块及其依赖关系&#xff0c;依赖关系表现为任务生成的数据被其他任务使用。这种形式化方法允许使用运行时系统&…

探索MVC、MVP、MVVM和DDD架构在不同编程语言中的实现差异

MVC与MVP/MVVM/DDD架构对比&#xff0c;不同语言实现 MVC 分层架构设计概述 模型-视图-控制器&#xff08;Model-View-Controller&#xff0c;简称 MVC&#xff09;是一种经典软件架构设计&#xff0c;通过分层解耦&#xff0c;使得系统结构清晰和易于维护&#xff0c;具有良…

一文读懂 UML:基础概念与体系框架

UML 图是一种标准化的建模语言&#xff0c;在软件开发和系统设计等领域有着广泛的应用。以下是对 UML 图各类图的详细介绍&#xff1a; 1.用例图 定义&#xff1a;用例图是从用户角度描述系统功能的模型图&#xff0c;展现了系统的参与者与用例之间的关系。作用&#xff1a;帮…

Spring 及 Spring Boot 条件化注解(15个)完整列表及示例

Spring 及 Spring Boot 条件化注解完整列表及示例 1. 所有条件化注解列表 Spring 和 Spring Boot 提供了以下条件化注解&#xff08;共 15 个&#xff09;&#xff0c;用于在配置类或方法上实现条件化注册 Bean 或配置&#xff1a; 注解名称作用来源框架Conditional自定义条件…

【Kafka】深入探讨 Kafka 如何保证一致性

文章目录 Kafka 基本概念回顾​副本角色​ 数据写入一致性​同步副本&#xff08;ISR&#xff09;集合​数据读取一致性​故障处理与一致性恢复​总结​ 在分布式系统领域&#xff0c;数据一致性是至关重要的一环。作为一款高性能的分布式消息队列系统&#xff0c;Kafka 在设计…

从入门到精通:SQL注入防御与攻防实战——红队如何突破,蓝队如何应对!

引言&#xff1a;为什么SQL注入攻击依然如此强大&#xff1f; SQL注入&#xff08;SQL Injection&#xff09;是最古老且最常见的Web应用漏洞之一。尽管很多公司和组织都已经采取了WAF、防火墙、数据库隔离等防护措施&#xff0c;但SQL注入依然在许多情况下能够突破防线&#…

【算法day27】有效的数独——请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 ,验证已经填入的数字是否有效即可。

36. 有效的数独 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现一次。 数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例…

leetcode 2360. 图中的最长环 困难

给你一个 n 个节点的 有向图 &#xff0c;节点编号为 0 到 n - 1 &#xff0c;其中每个节点 至多 有一条出边。 图用一个大小为 n 下标从 0 开始的数组 edges 表示&#xff0c;节点 i 到节点 edges[i] 之间有一条有向边。如果节点 i 没有出边&#xff0c;那么 edges[i] -1 。…

PySpur: AI 智能体可视化开发平台

GitHub&#xff1a;https://github.com/PySpur-Dev/pyspur 更多AI开源软件&#xff1a;发现分享好用的AI工具、AI开源软件、AI模型、AI变现 - 小众AI PySpur是一个开源的轻量级可视化AI智能体工作流构建器&#xff0c;旨在简化AI系统的开发流程。通过拖拽式界面&#xff0c;用户…

vcpkg安装及使用教程,以安装matio库解析mat文件为例

vcpkg安装及使用教程,以安装matio库解析mat文件为例 1. vcpkg安装2 安装matio三方库3 将三方库集成到VS中3.1 全局集成3.2 集成到特定工程4 结语Vcpkg 是微软开发的一款开源的 C/C++ 包管理工具,旨在简化 C/C++ 项目依赖库的安装和管理。它支持跨平台(Windows、Linux、macO…

LLM架构解析:NLP基础(第一部分)—— 模型、核心技术与发展历程全解析

本专栏深入探究从循环神经网络&#xff08;RNN&#xff09;到Transformer等自然语言处理&#xff08;NLP&#xff09;模型的架构&#xff0c;以及基于这些模型构建的应用程序。 本系列文章内容&#xff1a; NLP自然语言处理基础&#xff08;本文&#xff09;词嵌入&#xff0…

【Rtklib入门指南】2. 使用RTKLIB GUI进行观测数据分析

数据准备 下载2025年1月1日的香港CORS站数据和观测星历&#xff0c;详情参照如下博客&#xff1a; 使用GAMP_GOOD进行hk数据下载教程-CSDN博客 分析工具 RTKLIB 2.4.3 demo5&#xff08;也可以选用RTKLIB2.4.2&#xff0c;但不建议使用RTKLIB2.4.3&#xff09; 分析流程 …

suse15 sp1使用华为云软件源yum源zypper源

登录suse15终端&#xff0c; cd /etc/zypp/repos.d/进入目录后执行以下命令&#xff1a; zypper ar -fcg https://mirrors.huaweicloud.com/opensuse/distribution/leap/15.1/repo/oss HuaWeiCloud:15.1:OSS zypper ar -fcg https://mirrors.huaweicloud.com/opensuse/distribu…

首屏加载时间优化解决

&#x1f916; 作者简介&#xff1a;水煮白菜王&#xff08;juejin/csdn同名&#xff09; &#xff0c;一位前端劝退师 &#x1f47b; &#x1f440; 文章专栏&#xff1a; 高德AMap专栏 &#xff0c;记录一下平时学习在博客写作中记录&#xff0c;总结出的一些开发技巧✍。 感…