uniapp微信小程序图片上传

article/2025/9/16 12:35:11
<template><view class="content"><view class="button"><button @click="chooseFile" value="请选择文件">请选择文件</button></view><view class="img" v-for="imgPath in imgPaths"><image class="img_img" :src="imgPath"></image></view><button @click="getImg">savsaf</button><image :src="QRImg"></image></view></template><script>export default {data() {return {imgPaths:[],    //上传的图片保存QRImg:""		//查询的图片base64编码保存}},methods: {async getImg() {uni.request({url:'http://localhost:6003/Manage/test',method:'POST',responseType: "arraybuffer",success: (res) => {//将arrayBuffer数据转换成base64格式即可显示,这里的uni.arrayBufferToBase64(res.data)使用substring是因为不知道为什么会多出196个字符,删掉就可以显示图片了this.QRImg = 'data:image/jpeg;base64,'+ uni.arrayBufferToBase64(res.data).substring(196,uni.arrayBufferToBase64(res.data).length)}})},chooseFile(e){var that = this;uni.chooseImage({count: 9, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有sourceType: ['album'], //从相册选择success: function (res) {that.imgPaths = res.tempFilePaths;for (var i = 0; i < that.imgPaths.length; i++) {uni.uploadFile({url: 'http://localhost:6003/Manage/uploadImg', //仅为示例,非真实的接口地址filePath: that.imgPaths[i],name: 'uploadFile',formData: {'user': 'test'},success: (uploadFileRes) => {console.log(uploadFileRes);}});}}});}}}</script>

SpringBoot后端测试代码,另外数据库中字段为Blob(MediumBlob、LongBlob)类型。

 

    //插入图片到数据库,格式为blob@PostMapping("/uploadImg")public void uploadImg(MultipartFile uploadFile, HttpServletRequest req) throws IOException, SQLException {Blob blob = new SerialBlob(uploadFile.getBytes());houseimgMapper.insertimg(blob);}//将数据库获取到的blob返回给前端/*** 图片路径*///注意,我的实体类定义img的类型为:  private byte[] imgurl;@PostMapping("/test")public  ResponseEntity<byte[]> uploadImg() throws IOException, SQLException {byte[] imageContent = houseimgMapper.selectById(5).getImgurl();return new ResponseEntity<>(imageContent, HttpStatus.OK);}


 

 
 


http://chatgpt.dhexx.cn/article/WuByKeP7.shtml

相关文章

微信小程序上传照片,限制格式,限制大小,公用方法

方法 /*** 选择上传照片* page_that:调用方法的页面&#xff0c;* cb_key:返回参数数组的名称* count:上传张数* 返回值&#xff1a;数组*/ function selecImg(page_that, cb_key, count) {console.log("选择图片");wx.chooseImage({count: count,sizeType: [compre…

小程序 图片上传php后台,微信小程序上传图片到php服务器的方法

本文实例为大家分享了微信小程序上传图片到php服务器的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下 js代码如下 submitPhoto(){ var that this; wx.uploadFile({ url: http://xxx.cn/upload.php, //仅为示例&#xff0c;非真实的接口地址 filePath: imagePath, n…

微信小程序上传图片到Java后端

1.小程序wxml: <view><view>准备上传的图片</view><image class"ph" src"{{photoold}}" mode"aspectFit"></image><view><button bindtap"chooseImage" size"mini" type"prima…

(一)微信小程序云开发之上传图片(全流程讲解)

前言 第一次写CSDN&#xff0c;有什么写的不清楚的地方大家指点。 我本是做前端的&#xff0c;干了6年左右&#xff0c;前一阵接了个私活&#xff0c;做微信小程序。技术上小程序用的原生vant&#xff0c;后台管理系统用的VueElement&#xff0c;本来是前后端分离按照正常流程去…

小程序图片上传

小程序图片上传&#xff1a; 需求&#xff1a; 点击上传和删除选中图片功能实例&#xff1a; 分析过程&#xff1a; 1.首先使用tt.chooseImage()选择上传的图片&#xff0c;获取到所选择图片的网络地址。 2.然后使用tt.uploadFile()将选择的图片上传到项目后台。 3.其次使用…

小程序上传图片wx.uploadFile用法

前言&#xff1a; 小程序的上传和我们开发其他项目是不一样的&#xff0c;这里说一说他的用法。 使用步骤&#xff1a; 1、这里默认开发环境&#xff0c;并且默认不校验https,部署好环境 设置-》项目设置-》勾选 2、页面添加事件方法&#xff0c;这里核心方法是两个&#xff…

微信小程序实现图片上传

微信小程序实现图片上传 最近做了个小程序&#xff0c;涉及到了图片上传的功能&#xff0c;今天给大家详细介绍下如何实现小程序图片上传&#xff0c;话不多说先上代码 首先是静态布局和样式部分 .wxml代码部分 <view classload-img><view classload-box><v…

李宏毅《深度学习》:深度学习入门实例

1、Keras 在这里我们推荐使用keras进行深度学习编程&#xff0c;比起tensorflow来说更容易学习&#xff0c;操作简单&#xff0c; 2、手写识别实例 这里手写识别的数据集来自于minst&#xff0c;一个非常常用的数据集&#xff0c;从keras里可以直接导入 第一步&#xff0c;定…

零基础小白深度学习入门篇

觉得小编不错 请关注 加点赞 谢谢 一、人工智能和新科技革命 2017年,围棋界发生了一件比较重大的事,Master(AlphaGo)以60连胜横扫天下,击败各路世界冠军,人工智能以气势如虹的姿态出现在我们人类面前。围棋曾经一度被称为“人类智慧的堡垒”,如今,这座堡垒也随之成为…

学深度学习入门

深度学习(DL, Deep Learning)是机器学习(ML, Machine Learning)领域中一个新的研究方向&#xff0c;它被引入机器学习使其更接近于最初的目标——人工智能(AI, Artificial Intelligence)。 深度学习是学习样本数据的内在规律和表示层次&#xff0c;这些学习过程中获得的信息对…

《深度学习入门-基于Python的理论与实现》第四章带读 – 神经网络的学习

文章目录 4.1 从数据中学习4.2 损失函数a.均方误差b.交叉熵误差c.mini-batch学习d.为何要设定损失函数 4.3 梯度梯度法 4.4 神经网络的学习步骤 开篇介绍&#xff1a;《深度学习入门-基于Python的理论与实现》书籍介绍第一章&#xff1a;《深度学习入门-基于Python的理论与实现…

机器学习与深度学习入门篇

一、机器学习 1.机器学习是什么&#xff1f; 机器学习是将无序数据转换为价值的方法。 2.机器学习的价值 从数据中抽取规律&#xff0c;并预测未来。 3.机器学习的应用 &#xff08;1&#xff09;分类问题 图像识别、垃圾邮件识别。 &#xff08;2&#xff09;回归问题 股…

深度学习入门:基于Python的理论与实现①

深度学习入门&#xff1a;基于Python的理论与实现① 机器学习的三大要素第一章python入门1.Numpy1.1.numpy的N维数组1.2.numpy广播1.3访问元素 2.Matplotlib 第二章感知机1.感知机是什么2.感知机的实现2.1简单的实现2.2导入权重和偏置 3.多层感知机 第三章神经网络1.从感知机到…

深度学习入门与实战

数学基础 线性代数 深度学习背后的核心是标量、向量、矩阵和张量这 4 种数据结构&#xff0c;通过使用这些数据结构&#xff0c;以编程的方式解决所有基本的线性代数问题。 标量 标量&#xff0c;实际上就是一个单独的数。 向量及其运算 一个向量表示一组有序排列&#x…

深度学习入门:基于Python的理论与实现——第一章Python入门

本文为深度学习入门&#xff1a;基于Python的理论与实现的学习笔记&#xff0c;由于笔者已有matalb、c\c&#xff0c;java相关语言基础&#xff0c;故只记录不同之处需要注意的地方&#xff0c;供给有其他有语言基础&#xff0c;没学过python但研究方向为机器学习等分支方向的同…

《深度学习入门-基于Python的理论与实现》书籍介绍

写在开头&#xff0c;为什么要写这个专题 深度学习入门知识&#xff0c;无非就是神经网络、CNN、RNN等。很早之前就想出一个专题&#xff0c;用于梳理深度学习入门知识&#xff0c;方便形成更好的系统。 经过多方调研、思考&#xff0c;最终决定通过带读经典书籍的方式展开。…

深度学习入门(鱼书)学习笔记

第1章 Python入门 第2章 感知机 第3章 神经网络 3.2.激活函数 sigmoid函数&#xff1a; h ( x ) 1 1 exp ⁡ ( − x ) h(x)\frac{1}{1\exp(-x)} h(x)1exp(−x)1​ ReLU&#xff08;Rectified Linear Unit&#xff09;函数&#xff1a; h ( x ) { x , ( x > 0 ) 0 ,…

机器学习之深度学习入门

个人公众号 yk 坤帝 获取更多学习资料&#xff0c;学习建议 本文用浅显易懂的语言精准概括了机器学习的相关知识&#xff0c;内容全面&#xff0c;总结到位&#xff0c;剖析了机器学习的what&#xff0c;who&#xff0c;when, where, how&#xff0c;以及why等相关问题。从机器…

深度学习入门极简教程(一)

深度学习入门极简教程&#xff08;一&#xff09; 摘要&#xff1a; 当你和女朋友在路边手拉手一起约会的时候&#xff0c;你可曾想&#xff0c;你们之间早已碰撞出了一种神秘的智慧–深度学习。恋爱容易&#xff0c;相处不易&#xff0c;不断磨合&#xff0c;打造你们的默契&a…

简单易懂的讲解深度学习(入门系列之一)

摘要&#xff1a; 当你和女朋友在路边手拉手一起约会的时候&#xff0c;你可曾想&#xff0c;你们之间早已碰撞出了一种神秘的智慧–深度学习。恋爱容易&#xff0c;相处不易&#xff0c;不断磨合&#xff0c;打造你们的默契&#xff0c;最终才能决定你们是否在一起。深度学习也…