wx小程序学习Day12 上传图片

最新推荐文章于 2024-11-12 14:01:52 发布
最新推荐文章于 2024-11-12 14:01:52 发布
阅读量197 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gegegegege12/article/details/120275355
本文详细介绍了如何在小程序中实现意见反馈页，包括自定义图片组件的选择、显示、删除，以及完整的提交流程，包括文本验证和图片上传。

学习内容

意见反馈页-自定义图片组件

静态结构效果图👇
在这里插入图片描述
点击➕号可以选择本地图片上传，为了方便调用，这里把每个图片都自定义成组件

组件的静态结构比较简单在这里插入图片描述
在feedback中导入
在这里插入图片描述

意见反馈页-选择并显示图片

点击➕按钮，要调用小程序内置的选择图片wx-chooseImageapi，获取到图片路径数组，将图片路径存到data中，再将图片路径数组传给图片组件，在图片组件中渲染出来

api具体细节查看文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

注意一下，这里不能写chooseImg:res.temFilePaths，不然用户多次添加图片时就会重置图片路径数组
在这里插入图片描述
这里因为chooseImg数组元素就是图片路径，key要绑定*this
同时要把图片路径数组传给图片组件UpImg
在这里插入图片描述
图片组件UpImg渲染出来
在这里插入图片描述
在这里插入图片描述

意见反馈-删除图片

获取到点击的图片的索引，根据索引删除图片路径中对应的元素
在这里插入图片描述
在这里插入图片描述

意见反馈-提交功能

点击提交按钮：

  • 获取文本域的内容
  • 对这些内容进行合法性验证
  • 将用户选择的图片上传到专门的图片的服务器，返回图片外网的链接
  • 将文本与内容和外网的图片路径一起提交到服务器
  • 清空当前页面

1.获取文本域的内容
在data中定义一个变量textValue，在文本域标签上绑定这个变量
给文本域标签绑定输入事件，将输入的值存入到变量中

在这里插入图片描述
在这里插入图片描述
2. 合法性验证
在这只是验证一下是不是为空而已
获取到文本域的内容，如果为空就弹窗提示用户
在这里插入图片描述
3. 将图片上传到服务器
遍历图片数组，挨个上传
再维护一个图片数组，存放图片外网的链接
在这里插入图片描述
我没服务器所以就上传不了了，大概步骤就是下面这样😢
请添加图片描述
4. 将文本与内容和外网的图片路径一起提交到服务器
在这里插入图片描述
5.清空当前页面
在这里插入图片描述
当图片在上传时，最好给用户一个loading提示框，并且还需要判断一下用户只提交文本的情况
在这里插入图片描述

完

微信小程序开发中的图片选择与上传
wx_linying1029的博客
08-08 254
微信小程序开发中的图片选择与上传是一个常见的需求，下面我将详细介绍如何进行图片选择与上传的实现。
微信小程序-图片上传
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-23 7340
微信小程序有原生的API接口，来进行图片的选取、上传 wx.chooseImage(Object object) | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.htmlUploadTask | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/w
关于wx.uploadFile 上传的接口 我怎么上传多张图片
doutao6677的专栏
07-03 9041
function addUploadfile(cb) {    GetToken(function (restoken) {        wx.chooseImage({            count: 9, // 默认9             sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有             ...
微信小程序上传图片wx.uploadFile
weixin_48240707的博客
11-21 668
微信小程序上传图片
小程序上传图片wx.uploadFile用法
qq_25741071的博客
08-15 9757
原文：https://blog.csdn.net/qq_41619796/article/details/109182213 使用api: 1、wx.chooseImage 从本地相册选择图片或使用相机拍照。 参数 Object object 属性 类型 默认值 必填 说明 count number 9 否 最多可以选择的图片张数 sizeType Array. [‘original’, ‘compressed’] 否 所选的图片的尺寸 sourceType Array. [‘alb
微信小程序——day02.zip
01-11
在"微信小程序——day02"的学习主题中，我们将深入探讨微信小程序开发的基础和进阶知识。 1. **环境配置**：首先，你需要安装微信开发者工具，这是创建和调试小程序的必备平台。下载并安装后，可以通过工具进行项目...
微信小程序-外卖小程序Demo源码
05-14
【微信小程序-外卖小程序Demo源码】是一款专为开发微信小程序设计的示例代码，它包含了一个完整的外卖应用的框架，适用于学习和快速构建类似应用。这个Demo源码旨在帮助开发者理解微信小程序的架构和API的使用，以及...
微信的服务器进行上传,微信小程序如何实现图片上传+服务端接收功能
weixin_33345728的博客
08-10 1651
微信小程序如何实现图片上传+服务端接收功能发布时间：2021-07-03 17:13:03来源：亿速云阅读：61作者：小新小编给大家分享一下微信小程序如何实现图片上传+服务端接收功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！这次介绍下小程序当中常用的图片上传。微信的上传api。这里的filePath就是图片的存储路径...
苍穹外卖-day06（小程序开发）
ioncannontic的博客
11-12 660
- HttpClient - 微信小程序开发 - 微信登录 - 导入商品浏览功能代码
黑马微信小程序开发自学笔记——Day1小程序入门
2302_78698589的博客
01-04 1728
微信小程序
微信小程序实现图片上传
热门推荐
weixin_42261203的博客
04-07 2万+
微信小程序实现图片上传 最近做了个小程序，涉及到了图片上传的功能，今天给大家详细介绍下如何实现小程序图片上传，话不多说先上代码 首先是静态布局和样式部分 .wxml代码部分 <view class='load-img'> <view class='load-box'> <view class='img-item' wx:for="{{fileList}}" wx:key="index" > <image src="{{item.p
微信小程序上传图片和文件（多选，相册，微信聊天记录文件）
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
08-11 3813
max-count 是限制上传图片数量 可以不设置该属性。使用的vant的上传组件 原生用。
微信小程序学习实录9：掌握wx.chooseMedia实现多图片文件上传功能（选择图片、预览图片、上传图片）
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-07 1688
使用 wx.chooseImage API 可以让用户从相册或相机选择一张或多张图片。这个API可以设置用户可以选择的图片数量上限（默认9张）。
4.6【微信小程序全栈开发课程】意见反馈（二）--上传照片
腾讯云云开发布道师，慕课网合作讲师
10-17 696
1、添加变量 在opinion.vue文件data对象中添加4个变量addimage、img_count、src、wechat、userinfo addimage是未上传照片时默认显示照片的链接、img_count是用户上传照片的数量、src是用户上传的照片链接组成的数组、wechat是用户的微信号码、userinfo是用户信息 //参考代码，无需粘贴 //opinion:"", //word_c...
小程序上传帖子(含有文字图片的微信验证)
子枫Eric
07-10 619
public.js var graceJS = require('../../utils/grace.js'); import { config } from '../../config.js' Page({ /** * 页面的初始数据 */ data: { imglist: [], title:'', content:'', }, delImg(e) { let index .
微信小程序后端学习笔记——图片上传
qq_69891466的博客
08-09 4752
图片上传逻辑如下：1、通过微信小程序前端将图片上传到服务器2、服务器接收图片并保存在服务器内，并将图片保存的地址返回给前端3、前端通过服务器保存的地址即可调用图片。
小程序“账本小记”的意见反馈实现批量上传附件
py编程|爱分享
10-27 403
提交
13 | 小程序实战之意见反馈
NSX-Truth
08-22 4306
前言 其实微信小程序的button按钮，open-type可以跳转到内置的意见反馈界面，你如果想自己自定义一个意见反馈界面可以看看这篇文章，可以上传图片的哟 13.1 效果 13.2 静态页面 <Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange"> <view class="fb_main"> <view class="fb_title">问题的种类</view>
小程序基本命令
aiven1637的博客
10-30 3461
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序开发一个八字排盘小程序
最新发布
08-09
开发一个用于八字排盘的微信小程序是一个涉及前端、后端和数据处理的综合性项目。以下是一个详细的实现方法和教程，帮助你从零开始构建这个系统。 ### 1. 八字排盘的基本原理 八字排盘是根据用户的出生日期、时间、地点等信息，计算出对应的四柱八字，并结合命理规则进行分析。核心步骤包括： - **解析出生信息**：用户输入出生日期（公历或农历）、出生时间、出生地点。 - **转换为天干地支**：将公历日期转换为农历，再根据节气和时辰推算出年柱、月柱、日柱、时柱。 - **分析命理规则**：根据命理学的规则（如十神、五行、神煞等）对八字进行解读。 ### 2. 微信小程序前端开发 微信小程序的前端主要使用 WXML、WXSS 和 JavaScript 进行开发。你可以使用 UniApp 框架来实现跨平台兼容性，或者直接使用微信原生框架。 #### 2.1 页面结构设计 - **首页**：提供用户输入界面，包括日期选择器、时间选择器、地点选择器。 - **排盘结果页**：展示八字排盘结果，包括四柱、五行、十神等信息。 - **命理解读页**：根据排盘结果展示详细的命理分析内容。 #### 2.2 示例代码：日期选择器组件 ```html <view class="form-item"> <label>出生日期</label> <picker mode="date" range="{{dateRange}}" start="1900-01-01" end="2100-12-31" bindchange="onDateChange"> {{selectedDate}} </picker> </view> ``` #### 2.3 数据请求与交互 使用微信小程序的 `wx.request` 方法与后端 API 进行通信，获取排盘结果。 ```javascript Page({ data: { baziResult: {} }, submitForm() { const birthDate = this.data.selectedDate; const birthTime = this.data.selectedTime; const birthLocation = this.data.selectedLocation; wx.request({ url: 'https://api.example.com/bazi', method: 'POST', data: { date: birthDate, time: birthTime, location: birthLocation }, success: (res) => { this.setData({ baziResult: res.data }); } }); } }); ``` ### 3. 后端 API 开发 后端负责处理用户的输入，执行排盘算法，并返回结果。可以使用 Node.js、Python 或 PHP 等语言进行开发。 #### 3.1 排盘算法实现 排盘算法需要处理日期转换、节气计算、时辰推算等复杂逻辑。可以参考以下步骤： 1. **日期转换**：将公历日期转换为农历日期。 2. **节气计算**：确定出生日期是否处于某个节气附近，以决定月柱。 3. **时辰推算**：根据出生时间推算出时柱。 4. **干支组合**：生成年柱、月柱、日柱、时柱的天干地支组合。 #### 3.2 示例代码：使用 Python 进行日期转换 ```python from lunarcalendar import Lunar, Solar def convert_to_lunar(solar_date): solar = Solar(solar_date.year, solar_date.month, solar_date.day) lunar = Lunar.from_solar(solar) return lunar ``` #### 3.3 命理规则分析 通过数据库存储命理规则，如十神、五行、神煞等，后端根据排盘结果查询规则并返回解释。 ```sql CREATE TABLE fate_rules ( id INT PRIMARY KEY, rule_type VARCHAR(20), -- 十神/五行/神煞 condition JSON, result TEXT, weight FLOAT -- 规则权重 ); ``` ### 4. 安全与支付模块 #### 4.1 通信协议 - 使用 **RESTful API** 设计规范。 - 采用 **JWT Token** 进行用户鉴权。 - 数据传输使用 **AES-256-CBC** 加密，确保安全性。 #### 4.2 支付模块实现 支持多种支付方式（如微信支付、支付宝），可以使用支付工厂模式实现多支付接口适配。 ```php class PaymentFactory { public static function create($type){ switch($type){ case 'wechat': return new WechatPay(); case 'alipay': return new Alipay(); case 'thirdparty': return new ThirdPartyPay(); default: throw new Exception('Unsupported payment'); } } } ``` ### 5. 部署与维护 - **源码结构**： ``` bazi-system/ ├── mobile/ # 移动端源码（UniApp项目） ├── backend/ # 后端API（含排盘算法） ├── admin/ # 管理后台（Vue+ElementUI） ├── docs/ # 部署文档+API文档 └── thirdparty/ # 三方服务配置指南 ``` - **部署要求**： - 使用云服务器（如腾讯云、阿里云）部署后端服务。 - 使用微信开发者工具上传小程序代码。 - 配置 HTTPS 证书，确保 API 接口安全。 ### 6. 测试与优化 - **功能测试**：确保排盘结果准确，支付流程顺畅。 - **性能优化**：使用缓存机制减少重复计算，提升响应速度。 - **用户体验优化**：增加加载动画、错误提示、历史记录等功能。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值