小程序图片上传功能

article/2025/9/16 12:35:11

小程序代码:

UpImages.wxml

<button bindtap='uploadPhoto'>拍照选取照片上传</button>

 简单画一个页面,使用按钮调小程序默认的upload(page, path)方法,默认支持单次上传一张图片,可修改

 Upimages.js

Page({data: {imgData: []},uploadPhoto() { // 拍摄或从相册选取上传let that = this;wx.chooseImage({count: 1, // 默认9sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success(res) {let tempFilePaths = res.tempFilePaths; // 返回选定照片的本地路径列表 that.upload(that, tempFilePaths);}})},upload(page, path) { // 上传图片wx.showToast({icon: "loading",title: "正在上传……"});wx.uploadFile({url: '', //本地后端接口filePath: path[0],name: 'file',header: {"Content-Type": "multipart/form-data"   //必须是multipart/form-data格式才能上传文件},formData: {//和服务器约定的token, 一般也可以放在header中'session_token': wx.getStorageSync('session_token')},success(res) {console.log(res)if (res.statusCode != 200) {wx.showModal({title: '提示',content: '上传失败',showCancel: false});return;} else {wx.showModal({title: '提示',content: '上传成功',success: function (res) {if (res.confirm) { //这里是点击了确定以后console.log('用户点击确定')wx.navigateTo({url: "../index/index" //这里是上传成功后确定返回页面})} else { //这里是点击了取消以后console.log('用户点击取消')wx.navigateTo({url: "../index/index" //这里是上传成功后取消返回页面})}}})}},fail(e) {wx.showModal({title: '提示',content: '上传失败',showCancel: false});},complete() {wx.hideToast(); //隐藏Toast}})}
})

 后端接收

我目前使用的是SSM框架,需要在springmvc.xml添加配置

 springmvc.xml

<!-- 配置文件上传相关 --><!--配置文件解析器对象,有了它就可以进行文件上传--><!-- 配置文件解析器--><!-- 此处id为固定写法,不能随便取名--><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="1048576"></property></bean>

 Controller层代码

//接收小程序上传的图片@RequestMapping(value = "/upload", method = {RequestMethod.POST, RequestMethod.GET})@ResponseBodypublic String[] uploadfile(MultipartFile[] file, HttpServletRequest request) {//本地服务器图片文件地址String dir = "D:\\images";String[] b = null;for (MultipartFile files : file) {String filename = files.getOriginalFilename();String suffix = filename.substring(filename.lastIndexOf("."));String path = filename;//创建要保存文件的路径String time = new Date().getTime() + "." + suffix;String[] a = {path, time};File dirFile = new File(dir, time);if (!dirFile.exists()) {dirFile.mkdirs();}try {//将文件写入创建的路径files.transferTo(dirFile);return a;} catch (IOException e) {e.printStackTrace();}}return b;}

 记得最重要的一点:小程序的名称file和后台Controller接收的名称file必须一致才能把图片传输到后台


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

相关文章

uniapp微信小程序图片上传

<template><view class"content"><view class"button"><button click"chooseFile" value"请选择文件">请选择文件</button></view><view class"img" v-for"imgPath in imgPath…

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

方法 /*** 选择上传照片* 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…