uniapp上传图片 前端以及java后端代码实现

最近在做uniapp相关的开发,在上传图片的时候遇到了一些问题,所幸经过一些努力,解决开发过程中遇到的困难,记录一下uniapp上传图片的实现过程

1、前端代码

setPic1: function() {var me = this;var serverUrl = this.serverUrl;uni.chooseImage({count: 1,sizeType: ['original', 'compressed'],success: function(res) {const tempFilePaths = res.tempFilePaths[0];uni.uploadFile({url: serverUrl+ '/api/common/upload',filePath: tempFilePaths,name: 'file',success: (myres) => {var jsonObject = JSON.parse(myres.data);if(jsonObject.code == 0){var imageUrl = jsonObject.data.url;me.businessLicencesUrl = imageUrl;me.isUploadimg = true;}}});}});},

uploadFile中URL指向的是自己的上传接口, filePath就是一个临时路径

2、java的后端代码

@ApiOperation("图片上传")@PostMapping("/common/upload")public AjaxResult uploadFile(HttpServletRequest request) throws Exception{try{// 上传文件路径String filePath = IMAGEHOME;MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;//对应前端的upload的name参数"file"MultipartFile file = req.getFile("file");// 上传并返回新文件名称String fileName = FileUploadUtils.upload(filePath, file);String url = serverConfig.getUrl() + fileName;Map<String, Object> result = new HashMap<>();result.put("fileName", fileName);result.put("url", url);return AjaxResult.success(result);}catch (Exception e){return AjaxResult.error(e.getMessage());}}

测试图片上传的功能,最后真机测试,或是通过小程序测试,PC端调试的时候,uniapp生成的临时文件路径可能会有问题,至此图片上传功能完成。 

 

 

 

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

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

相关文章

【nlp】4.3 nlp中常用的预训练模型(BERT及其变体)

nlp中常用的预训练模型 1 当下NLP中流行的预训练模型1.1 BERT及其变体1.2 GPT1.3 GPT-2及其变体1.4 Transformer-XL1.5 XLNet及其变体1.6 XLM1.7 RoBERTa及其变体1.8 DistilBERT及其变体1.9 ALBERT1.10 T5及其变体1.11 XLM-RoBERTa及其变体2 预训练模型说明3 预训练模型的分类1…

Kubernetes技术与架构-配置

一般情况下&#xff0c;Kubernetes使用yaml文件格式定义配置文件&#xff0c;配置文件须指定对应的API稳定版本号&#xff0c;将配置文件进行版本控制、在发布新版本的过程中出问题时可以执行版本回滚操作&#xff0c;将相关联的对象定义在同一个配置文件中、从而更容易地管理&…

【设计模式】行为型模式-第 3 章第 5 讲【观察者模式】

目录 观察者模式(Observer Mode)定义 目的 主要解决什么问题 实现 基本类图

C++学习之路(六)C++ 实现简单的工具箱系统命令行应用 - 示例代码拆分讲解

简单的工具箱系统示例介绍: 这个示例展示了一个简单的工具箱框架&#xff0c;它涉及了几个关键概念和知识点&#xff1a; 面向对象编程 (OOP)&#xff1a;使用了类和继承的概念。Tool 是一个纯虚类&#xff0c;CalculatorTool 和 FileReaderTool 是其派生类。 多态&#xff1…

csdn的搜索关键词

忽然发现一个问题&#xff1a;通过关键字找自己的博文&#xff0c;自己知道自己曾经写过某篇文章&#xff0c;但是不记得具体目录与位置&#xff0c;标题了&#xff0c;只知道大概是什么相关的&#xff0c;这个时候就需要关键字查询了&#xff0c;快速方便的找到自己需要的文章…

计算一个Series序列的n阶滞后相关系数Series.autocorr()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算一个时间序列的 n阶滞后自相关系数 Series.autocorr(n) [太阳]选择题 以下代码的说法中正确的是? import pandas as pd s1 pd.Series([1,2,3,4,5,6]) print("【显示】s1:\n",…

7 通用数字量输入输出GPIO

文章目录 7.0 GPIO概念7.1 GPIO工作原理7.2 GPIO寄存器以及编程7.2.5 GPIO寄存器编程设置与应用 7.3 GPIO跑马灯7.3.1 LED 输出初始化7.3.2 跑马灯输出实验7.3.3 按键输入实验 7.0 GPIO概念 GPIO&#xff08;general purpose intput output&#xff09;是通用输入输出端口的简…

最火web大屏可视化编辑器

前言&#xff1a; 乐吾乐Le5le大屏可视化设计器&#xff0c;零代码实现物联网、工业智能制造等领域的可视化大屏、触摸屏端UI以及工控可视化的解决方案。同时也是一个Web组态工具&#xff0c;支持2D、3D等多种形式&#xff0c;用于构建具有实时数据展示、监控预警、丰富交互的组…

2009年iMac装64位windows7及win10

2009年iMac装64位windows7及win10 Boot Camp没有“创建 Windows7 或更高版本的安装磁盘”选项 安装完Mac OS系统后&#xff0c;要制作Windows7安装U盘时才发现&#xff0c;Boot Camp没有“创建 Windows7 或更高版本的安装磁盘”选项&#xff0c;搜索到文章&#xff1a;修改Boo…

laravel框架学习

一、文件上传 在控制器中按下面所示书写 public function upload(){$this->domain $_SERVER[HTTP_HOST]; //获取当前域我&#xff0c; 其实这个是不应该写在这儿&#xff08;应该是一个全局&#xff09;&#xff0c;我只是做个例子。$file $this->require->file(fi…

blender 3D眼球结构

角膜&#xff08;Cornea&#xff09;&#xff1a;眼球的前部&#xff0c;透明的曲面&#xff0c;负责折射光线。虹膜&#xff08;Iris&#xff09;&#xff1a;眼睛的颜色部分&#xff0c;控制瞳孔大小以调整进入眼睛的光量。瞳孔&#xff08;Pupil&#xff09;&#xff1a;虹膜…

Mycat实现读写分离

Mycat实现读写分离 Mycat支持MySQL主从复制状态绑定的读写分离机制。这里实现的也是基于MySQL主从复制的读写分离。 MySQL主从复制配置 首先要配置MySQL的主从复制&#xff0c;这里配置的是一主一次从。可以参考下面的文章。 https://blog.csdn.net/wsb_2526/article/detail…

Zookeeper分布式锁实现Curator十一问

前面我们通过Redis分布式锁实现Redisson 15问文章剖析了Redisson的源码&#xff0c;理清了Redisson是如何实现的分布式锁和一些其它的特性。这篇文章就来接着剖析Zookeeper分布式锁的实现框架Curator的源码&#xff0c;看看Curator是如何实现Zookeeper分布式锁的&#xff0c;以…

OpenMMlab导出yolox模型并用onnxruntime和tensorrt推理

导出onnx文件 直接使用脚本 import torch from mmdet.apis import init_detector, inference_detectorconfig_file ./configs/yolox/yolox_tiny_8xb8-300e_coco.py checkpoint_file yolox_tiny_8x8_300e_coco_20211124_171234-b4047906.pth model init_detector(config_fi…

ARM - AArch64 - 通用寄存器

说明 在深入一点了解了系统调用以及非安全world&#xff08;REE&#xff09;/安全world&#xff08;TEE&#xff09;切换时参数传递和结果返回的实现原理&#xff08;通过通用寄存器实现&#xff09;&#xff0c;对通用寄存器的使用有了一个全新的认识&#xff0c;对知识做个总…

MATLAB中corrcoef函数用法

目录 语法 说明 示例 矩阵的随机列 两个随机变量 矩阵的 P 值 相关性边界 NaN 值 corrcoef函数的功能是返回数据的相关系数。 语法 R corrcoef(A) R corrcoef(A,B) [R,P] corrcoef(___) [R,P,RL,RU] corrcoef(___) ___ corrcoef(___,Name,Value) 说明 R corrc…

【海德教育】唐山成人高考艺术类包括哪些专业?

成人高校开设的艺术类招生专业主要有&#xff1a;艺术设计、装饰、装潢、书法、绘画、音乐、美术、戏剧表演、播音、服装设计、摄影等专业。

sebp/elk镜像历史版本

最近因为之前sebp/elk的镜像和容器出现问题而误删了. 新版本随便功能全, 但是配置较为繁琐. 因此想要根据之前的截图找到之前的版本. 但是查看版本需要科学. 因此在花时间研究出来科学的方法之后, 还是决定将历史的版本信息留存下来, 以供后续开发需要 相关官网(需科学上网): s…

1. 图的广度优先遍历

当一道题的AC变成了找不同的时候&#xff0c;一切就开始失去意义。 到底是谁&#xff1f;把Search写成Seacrh&#xff0c;害我一直找不同。 本实验实现邻接表表示下无向图的广度优先遍历。 程序的输入是图的顶点序列和边序列(顶点序列以*为结束标志&#xff0c;边序列以-1,-1…

【洛谷算法题】P5715-三位数排序【入门2分支结构】

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【洛谷算法题】 文章目录 【洛谷算法题】P5715-三位数排序【入门2分支结构】&#x1f30f;题目描述&#x1f30f;输入格式…