微信小程序之图片上传并保存在服务器

先将图片上传到服务器,后端接口将保存好的图片地址返回给小程序,再将小程序中添加图像的图片的url替换为服务器中照片的存储地址(使微信小程序中显示出上传的图片)。

1、效果如下:

点击图像后选择图像:

结果:

2、源码:

wxml:

 <view class="form-item"><text class="form-item-label">上传二手书照片!</text><view class="load-img1" bindtap="addImg"><image class="load-img" src="{{imageUrl}}" mode="aspectFill" /></view></view>

js:

   //上传图片  addImg: function() {var self = this;// 开始上传图片到服务器wx.chooseImage({count: 1, // 设置最多可以选择的图片数量,默认为9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function(res) {var tempFilePaths = res.tempFilePaths[0];wx.uploadFile({url: 'http://localhost:5000/upload',filePath: tempFilePaths,name: 'file',formData: {},method: 'POST',success: function(uploadRes) {const data = JSON.parse(uploadRes.data);if (data.status === "success") {console.log('图片上传成功,服务器返回结果:', data.message);// 更新页面数据self.setData({imageUrl: data.url // 假设返回结果中的imageUrl字段是上传后图片的服务器地址});} else {console.error('图片上传失败:', data.message || '未知错误');}},fail: function(uploadErr) {console.error('图片上传失败:', uploadErr);},});},fail: function(err) {console.error('Choose image failed:', err);},});},

 `addImg` 函数负责处理用户添加图片的操作。
        首先,通过调用 `wx.chooseImage` 方法,允许用户从手机相册或相机中选择一张图片。参数指定了用户最多可以选择1张图片,可以选择原图或压缩图,且来源可以是相册或相机。
        当用户选择图片成功后,回调函数中的 `res.tempFilePaths[0]` 获取到临时文件路径,这是微信小程序提供的一个临时存放用户所选图片的地方。
        接着,使用 `wx.uploadFile` 方法将临时图片文件上传到服务器。指定的上传地址是 `'http://localhost:5000/upload'`,并通过 POST 请求方式上传。
        上传时,将临时文件路径作为 `filePath` 参数,同时设置了文件上传时的参数名称为 `'file'`,并且可能还附带了一些额外的表单数据(在这里为空对象)。
        如果图片上传成功,`uploadFile` 成功回调函数会被调用,解析服务端返回的 JSON 数据,检查其中的 `status` 字段是否为 `"success"`。如果是,则表示上传成功,打印成功信息,并将服务端返回的图片 URL 存储到组件的 `imageUrl` 数据中,以便在页面上展示。
        如果图片上传失败,无论是由于服务器返回的状态错误,还是上传过程中出现的问题,都会在相应的失败回调函数中捕获并打印错误信息。

注意:代码中提到的服务器返回地址 `'http://localhost:5000/upload'` 通常是在本地开发环境中的地址,实际部署时需要替换为真实服务器的上传接口地址。

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

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

相关文章

Kafka不仅是消息队列而是一个分布式消息处理平台

目录 1. kafka架构图 2.关键概念解析 2.1 producer 2.2 consumer: 2.3 brkoer 2.4 Topic 与 Partition 2.5 AR (Assigned Replicas) 2.6 ISR(In-Sync Replicas) 2.7 OSR (Out-of-Sync Replicas) 2.8 HW (High Water-mark) 2.9 LEO (Log End Offset)

搜维尔科技:【工业仿真】煤矿机械安全事故VR警示教育系统

产品概述 搜维尔科技 煤矿机械安全事故VR警示教育系统 系统内容&#xff1a; 系统采用虚拟现实技术模拟矿井井下机械安全技术及事故&#xff0c;展现井下常见机械伤害事故&#xff0c;表现伤害事故的隐患点&#xff0c;能够模拟事故发生和发展过程&#xff1b;营造井下灾害发…

如何使用 Node.js 发送电子邮件全解和相关工具推荐

大多数Web应用程序都需要发送电子邮件。它可能用于注册、密码重置、状态报告&#xff0c;甚至是完整的市场营销活动&#xff0c;如新闻和促销。本教程解释了如何在Node.js中发送电子邮件&#xff0c;但其概念和挑战适用于您正在使用的任何系统。 你会在 npm 上找到大量与电子邮…

详细UI色彩搭配方案分享

UI 配色是设计一个成功的用户界面的关键之一。UI 配色需要考虑品牌标志、用户感受、应用程序的使用场景&#xff0c;这样可以帮助你创建一个有吸引力、易于使用的应用程序。本文将分享 UI 配色的相关知识&#xff0c;帮助设计师快速构建 UI 配色方案&#xff0c;以满足企业的需…

windows10小皮安装不同版本composer,实现自由切换使用

1、使用phpstudy小皮面板安装composer1.8.5和composer2.5.8两个版本&#xff1b; 2、打开刚才安装的composer安装目录&#xff1a;D:\phpstudy_pro\Extensions 3、打开composer1.8.5版本&#xff0c;修改composer.bat名称为composer1.8.5.bat&#xff1a; 4、打开composer2.5.8…

隐私计算DataTrust:从产品需求到工程架构实践

继上期介绍了新监管形势下的隐私技术及数据共享合规设计的思考,本期将接着为大家讲解,国内唯一一个获得工信部三项隐私计算测评的产品DataTrust,在隐私计算领域从产品需求到工程架构的实践之路。 随着数据作为第五大生产要素被提出,“数据流通”的社会价值已形成广泛共识,…

Linux命令学习—Apache 服务器(下)

1.7、访问控制、认证授权的综合指令 1.7.1、两种综合情况 1、满足一种条件即可访问 Satisfy any 或者满足访问控制的条件&#xff0c;或者满足认证授权的条件&#xff0c;就可以访问指定页面、目录 2、必须同时满足 2 个条件才能访问 Satisfy all必须同时满足访问控制和认…

vue的实现八股

双向绑定原理 Vue的双向绑定原理是通过数据劫持和观察者模式实现的。 vue使用了响应式的对象&#xff0c;即当数据发生改变的时候&#xff0c;视图也会随之改变 数据劫持&#xff1a; vue2使用了object.definedproperty对数据的每个属性进行劫持&#xff0c;从而逐一对每个…

【报错】Process finished with exit code 139 (interrupted by signal 11: SIGSEGV)

在你检查完没有内存溢出等各种各种情况之后&#xff0c;仍然不知道该怎么解决&#xff0c;这里提供一个可能的解决办法。 如果你也用的是Mac M1芯片&#xff0c;在跑numpy的时候出现 Intel MKL Warning&#xff1b; 或在用pytorch训练模型的时候遇到segmentation fault。有可能…

【机器学习300问】75、如何理解深度学习中Dropout正则化技术?

一、Dropout正则化的原理是什么&#xff1f; Dropout&#xff08;随机失活&#xff09;正则化是一种用于减少神经网络中过拟合现象的技术。Dropout正则化的做法是&#xff1a; 在训练过程中的每次迭代中&#xff0c;随机将网络中的一部分权重临时"丢弃"&#xff08;即…

Java工具类:压缩图片至指定大小

不好用请移至评论区揍我 原创代码,请勿转载,谢谢! 一、介绍 接收File参数及目标大小,将自动递归压缩至指定大小已增加删除压缩产生的临时文件等逻辑处理传递的原文件将不会执行delete操作,而是在基础上返回压缩后的文件传递文件名示例(xxx.txt),压缩后文件名示例(xxx_…

前端三大件速成 01 HTML

文章目录 一、前端基础知识二、标签1、什么是标签2、标签的属性3、常用标签&#xff08;1&#xff09;声明&#xff08;2&#xff09;注释&#xff08;3&#xff09;html 根标签&#xff08;3&#xff09;head标签&#xff08;4&#xff09;body标签 三、特殊字符四、其他标签1…

web安全学习笔记(11)

记一下第十五节课的内容。 一、创建MySQL执行函数 我们在function.php中&#xff0c;自定义一个函数&#xff1a; #SQL查询函数 function Qurey($sql) {#连接数据库$db new mysqli(172.20.10.3, liuyan, 123456, liuyan, 3306);#判断是否连接成功if (mysqli_connect_errno(…

redis的数据结构报错

文章目录 redis的数据结构报错Redis使用LocalDateTime报错问题 redis的数据结构报错 Redis使用LocalDateTime报错问题 SpringBoot整合Redis时&#xff0c;使用LocalDate以下报错 org.springframework.data.redis.serializer.SerializationException: Could not read JSON: C…

(八)Pandas窗口数据与数据读写 学习简要笔记 #Python #CDA学习打卡

一. 窗口数据(Window Functions) Pandas提供了窗口函数(Window Functions)用于在数据上执行滑动窗口操作&#xff0c;可以对数据进行滚动计算、滑动统计等操作。需要注意的是&#xff0c;在使用窗口函数时&#xff0c;需要根据实际需求选择合适的窗口大小和窗口函数&#xff0…

大数据------额外插件及技术------Git(完整知识点汇总)

Git 定义 它是分布式版本控制工具&#xff0c;主要用于管理开发过程中的源代码文件&#xff08;如&#xff1a;Java类、xml文件、html页面等&#xff09;&#xff0c;在软件开发过程中被广泛应用 作用 代码回溯&#xff1a;快速回到某一代码历史版本版本切换&#xff1a;同一个…

Qt解析json格式数据

文章目录 json格式对象格式数组格式 QJsonDocument, QJsonObject,QJsonArray,QJsonValue例一&#xff1a;如何构建QJsonObject和QJsonDocument例二&#xff1a;解析前面的嵌套型json数据 json格式 对象格式 一个对象, 由一个大括号表示&#xff1a; 括号中 描述对象的属性&am…

【嵌入式开发】SecureCRTPortable工具进行串口信息监听打印

SecureCRTPortable工具进行串口信息监听打印 一、什么是SecureCRT二、如何使用SecureCRT进行串口监听1、硬件连接2、驱动安装3、软件连接4、串口连接5、日志设置 近期发现许多小伙伴欠缺SSH工具使用基础&#xff0c;工欲善其事&#xff0c;必先利其器&#xff0c;这里奉上使用教…

股票战法课程之主力的痕迹

文章目录 1. 主力的操作痕迹2. 主力的建仓2.1 建仓的三种方式2.2 建仓的五个特点2.3 建仓的迹象2.4 建仓的成交量特征 1. 主力的操作痕迹 序号痕迹原因1不跟随大盘节奏筹码都在主力手中2突发利空消息&#xff0c;股价不跌反涨主力被套&#xff0c;不希望散户抛盘3很小的成交量…

【Spring】Spring MVC入门

Spring MVC入门 一、什么是Spring Web MVC&#xff1f; 1.1 MVC定义 MVC是Model View Controller的缩写&#xff0c;是一种软件架构的设计模式&#xff0c;将软件系统分为模型、视图、控制器三个部分。 示意图如下: 可以看到&#xff0c;Controller作为一个“粘合剂”处于M…