当前位置：首页 > 编程日记 > 正文

微信小程序云开发图片上传完整代码附效果图

编程日记 2024-08-05 09:20:00

在app.json里面加如下代码, 使用 WeUI组件库。点击跳转

  "useExtendedLib": {"weui": true},

先看效果图

wxml

<!--pages/publish/publish.wxml-->
<view class="page" data-weui-theme="{{theme}}"><view class="weui-form"><view class="weui-form__control-area"><view class="weui-cells__group weui-cells__group_form"><view class="weui-cells weui-cells_form"><view class="weui-cell "><view class="weui-cell__bd"><textarea class="weui-textarea" bindinput="ttval" placeholder="请描述你的问题或经验..." rows="3"></textarea><view class="weui-uploader__bd"><view class="weui-uploader__files" id="uploaderFiles"><block wx:for="{{files}}" wx:key="*this"><view class="weui-uploader__file" bindtap="previewImage" id="{{item}}"><image class="weui-uploader__img" src="{{item}}" mode="aspectFill" /></view></block></view><view class="weui-uploader__input-box"><view class="weui-uploader__input" bindtap="chooseImage"></view></view></view><!-- <view class="weui-textarea-counter"><text>0</text>/200</view> --></view></view></view></view></view><view class="weui-form__opr-area"><view class="weui-btn weui-btn_primary" catchtap="add_square">上传</view></view></view>
</view>

wxss

.weui-form__control-area{margin-top: 0px;
}

// pages/publish/publish.js
const app = getApp();
const DB = wx.cloud.database()
var that;
var util = require('../../utils/util');
var yun_file_id_arr = [];
Page({data: {files: []},onLoad() {},ttval(e) {console.log(e.detail.value);this.setData({ttval: e.detail.value})},up_img(item_idx, end_idx) {if (item_idx == end_idx) {this.add_square();yun_file_id_arr=[];return}var files = this.data.files;var date = new Date().getTime()wx.cloud.uploadFile({cloudPath: date + '.png',filePath: files[item_idx], // 文件路径}).then(res => {yun_file_id_arr.push(res.fileID)item_idx++;this.up_img(item_idx, end_idx)}).catch(error => {// handle error})},add_square() {if (yun_file_id_arr.length==0) {if (this.data.files.length > 0) {this.up_img(0, this.data.files.length);} else {wx.showToast({title: '请选择文件',icon: 'none'})}return}var userInfo = wx.getStorageSync('user')var data = {userType: this.data.ttval,yun_file_id_arr: yun_file_id_arr,nickName: userInfo.nickName,avatarUrl: userInfo.avatarUrl,time: util.formatTime(new Date()),openId: userInfo._openId};console.log('data', data)DB.collection('square').add({// data 字段表示需新增的 JSON 数据data: data}).then(res => {console.log(res)wx.showToast({title: '上传完毕',})wx.switchTab({url: '/pages/studycentre/studycentre',})})},chooseImage: function (e) {var that = this;wx.chooseImage({sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片that.setData({files: that.data.files.concat(res.tempFilePaths)});}})},previewImage: function (e) {wx.previewImage({current: e.currentTarget.id, // 当前显示图片的http链接urls: this.data.files // 需要预览的图片http链接列表})}
});

完成

https://www.dkcj.cn/info/12907.html

图片lightbox2

1. 官网下载 http://lokeshdhakar.com/projects/lightbox2/ 2.引入 css jquery js 3. HTML格式 <a href"images/image-2.jpg" data-lightbox"roadtrip"> <img srcImage #1> </a> <a href"images/image-3.jpg" data-lig…

编程日记2024/08/05 09:10:00

夏天和空调_您可以在今年夏天开始学习650项免费的在线编程和计算机科学课程...

夏天和空调Seven years ago, universities like MIT and Stanford first opened up free online courses to the public. Today, more than 900 schools around the world have created thousands of free online courses, popularly known as Massive Open Online Courses or …

编程日记2024/08/05 09:00:00

bzoj1854: [Scoi2010]游戏

可以跑二分图到第一个不能匹配的点就退出嗯还有并查集判环的做法？ 1 #include<iostream>2 #include<algorithm>3 #include<cstdio>4 #include<cstdlib>5 #include<cstring>6 #include<string>7 8 using namespace std;9 10…

编程日记2024/08/05 08:50:00

ant 获取当前url的参数

在util.js 中封装一个函数公共函数： import { parse } from querystring; export const getPageQuery () > parse(window.location.href.split(?)[1]); 例如当前url 为：http://localhost:8000/manage/member_s_custome?corpIdww02c137b227b01c…

编程日记2024/08/05 08:40:00

微软todo使用教程_Todo教程可能很有趣-但是，这是从头开始构建自己的项目的方法...

微软todo使用教程There are many great tutorials that walk you through creating apps, from simple todo lists to fully working web apps. But how do you start your own projects from scratch? Without the safety net of a tutorial, you might feel a bit lost on w…

编程日记2024/08/05 08:30:00

python的with语句

from sqlalchemy import create_engine from sqlalchemy.orm import scoped_session, sessionmaker from setting import EREBUS_DB_CONNECT_STRING from contextlib import contextmanager# 创建数据库引擎，echo为True，会打印所有的sql语句 engine cre…

编程日记2024/08/05 08:20:00

MSSQL 2012 拒绝了对对象 'extended_properties' (数据库 'mssqlsystemresource'，架构 'sys')的 SELECT 权限...

查看数据库的表的时候报如下错误： MSSQL 2012 拒绝了对对象 extended_properties (数据库 mssqlsystemresource，架构 sys)的 SELECT 权限。 (Microsoft SQL Server，错误: 229) 解决方法： 在数据库里相应的用户权限中，把…

编程日记2024/08/05 08:10:00

ant 接口返回文件流，前端自动下载实现

封装网络请求： reqAxios.js import Axios from axios; import qs from qs; import { router } from umi; import { message } from antd;Axios.defaults.withCredentials = true// const httpUrl = https://xxx.cn/work_telecom_manage const httpUrl = window.location.o…

编程日记2024/08/05 08:00:00

矩阵奇异值分解特征值分解_推荐系统中的奇异值分解与矩阵分解

矩阵奇异值分解特征值分解Recently, after watching the Recommender Systems class of Prof. Andrew Ng’s Machine Learning course, I found myself very discomforted not understanding how Matrix Factorization works.最近，在观看了Andrew Ng教授的机器学习课…

编程日记2024/08/05 07:50:00

小程序云开发获取手机号完整代码云函数中网络请求第三方接口

小程序云开发获取手机号完整代码效果图： 小程序代码 <button open-type"getPhoneNumber" bindgetphonenumber"getPhoneNumber">登录</button> getPhoneNumber: function (e) {var that this;if (!e.detail.errMsg || e.detail.…

编程日记2024/08/05 07:40:00

集合恒等式定律及文氏图

1、分配律 1.1 A∩(B∪C) (A∩B)∪(A∩C) 说明：从左至右，图1中三角形区域为 A，草绿色区域为 (B∪C)，即有三角形又有草绿色底色的区域即为 A∩(B∪C) 图2中三角形区域为 (A∩B)，草绿色区域为 (A∩C)，三角形…

编程日记2024/08/05 07:30:00

微信小程序布局水平菜单

<view class"wear-menu"><view classmenu-box wx:key"menu" wx:for"{{menuList}}" wx:for-index"index"><view class"menu-img" bindtap"selectMenu" data-index"…

编程日记2024/08/05 07:20:00

keras神经网络回归预测_如何使用Keras建立您的第一个神经网络来预测房价

keras神经网络回归预测by Joseph Lee Wei En通过李维恩一步一步的完整的初学者指南，可使用像Deep Learning专业版这样的几行代码来构建您的第一个神经网络！ (A step-by-step complete beginner’s guide to building your first Neural Network in a c…

编程日记2024/08/05 07:10:00

transform总结

1. 用jquery的css方法获取transform得到的是矩阵matrix,不利于获取translate的值， 优先使用dom.style.webKitTransform进行transform的读写 2. 从transform中读取translate的值方法 //jquery版本 function fGetTranslate($obj,type){var transformMatrix obj.css(&…

编程日记2024/08/05 07:00:01

uni-app 音频控制

选择不同的音频，销毁上一个音频，播放最新的音频文件。效果图： 音频组件代码: <template><view id"share_card" class"share_card"><view class"top"><img class"ms" :class…

编程日记2024/08/05 06:50:00

devkit_如何使用NodeMCU Devkit和Firebase数据库开始物联网

devkitby Jibin Thomas吉宾托马斯(Jibin Thomas) 如何使用NodeMCU Devkit和Firebase数据库开始物联网 (How to get started with IoT using NodeMCU Devkit and Firebase database) “The Internet will disappear. There will be so many IP addresses, so many devices, sen…

编程日记2024/08/05 06:30:00

洛谷p1162填涂颜色（dfs写法）

这道题本是放在试炼场bfs里的，但是我觉得dfs好写些所以就用dfs过了题目如下题目描述由数字0 组成的方阵中，有一任意形状闭合圈，闭合圈由数字1构成，围圈时只走上下左右4个方向。现要求把闭合圈内的所有空间都填写成2.例如&…

编程日记2024/08/05 06:20:00

Microsoft .NET Framework 4.6.1

适用于操作系统平台：Windows 7 SP1、Windows 8、Windows 8.1、Windows 10、Windows Server 2008 R2 SP1、Windows Server 2012 和 Windows Server 2012 R2 .NET Framework 4.6.1 官方更新介绍页面 http://msdn.microsoft.com/en-us/library/ms171868%28vvs.110%29.a…

编程日记2024/08/05 06:10:00

VUE还没生效，页面闪屏的问题解决办法 v-cloak

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。 html： <div id"app">{{context}} </div>js： <script…

编程日记2024/08/05 06:00:00

如何使用Python创建，读取，更新和搜索Excel文件

This article will show in detail how to work with Excel files and how to modify specific data with Python.本文将详细显示如何使用Excel文件以及如何使用Python修改特定数据。 First we will learn how to work with CSV files by reading, writing and updating them.…

编程日记2024/08/05 05:50:00

字符串基本操作

1.已知‘星期一星期二星期三星期四星期五星期六星期日 ’，输入数字（1-7），输出相应的‘星期几’ s"星期一星期二星期三星期四星期五星期六星期日" iint(eval(input("请输入1-7的数字:"))) print(s[3*(i-1):3*i…

编程日记2024/08/05 05:40:00

IOS长按识别二维码失败

IOS长按不识别二维码，出现放大图片的问题解决。 CSS加入样式： touch-callout: none; -webkit-touch-callout: none; -ms-touch-callout: none; -moz-touch-callout: none; 代码： <!DOCTYPE html> <html><head><s…

编程日记2024/08/05 05:30:00

从svn下载的Mavn项目，到本地后不识别（MyEcplise）

从svn上面现在的mavn的项目到本地不识别的原因 1.首先要确认本机的mavn的环境是否正确。 2.查看本机的Myecplise的mavn的环境配置是否正确 3.在cmd当中执行命令 mvn -Dwtpversion1.0 eclipse:myeclipse ，可能svn上面的文件是eclipse建立的，需要进行转化。…

编程日记2024/08/05 05:20:00

python导入外部包_您会喜欢的10个外部Python软件包

python导入外部包by Adam Goldschmidt亚当戈德施密特(Adam Goldschmidt) 您会喜欢的10个外部Python软件包 (10 External Python packages you are going to love) Python is an experiment in how much freedom programmers need. Too much freedom and nobody can read anoth…

编程日记2024/08/05 05:10:00

【转修正】sql server行版本控制的隔离级别

在SQL Server标准的已提交读（READ COMMITTED）隔离级别下，一个读操作会和一个写操作相互阻塞。未提交读（READ UNCOMMITTED）虽然不会有这种阻塞，但是读操作可能会读到脏数据，这是大部分用户不能接…

编程日记2024/08/05 05:00:00

【机器学习基石笔记】八、噪声和错误

噪声的来源： 1、noise in y 2、noise in x 在有noise的情况下，vc bound还会work么？？？ 之前，x ~ p(x) 现在 y ~ P( y | x ) 在hoeffding的部分，只要 (x, y) 联合分布满足某个分布， 结…

编程日记2024/08/05 04:50:00

H5用户地址位置选择地点获取经纬度（效果图）

效果图： uni-app <template><view class"flex-v flex-c wrap"><web-view src"https://apis.map.qq.com/tools/locpicker?search1&type1&key7QKBZ-SJ2HF-7TFJS-JL5NE-E6ZD7-SWFW5&referer鏅鸿兘鍚嶇墖"></we…

编程日记2024/08/05 04:40:00

学习sql注入:猜测数据库_对于SQL的热爱：为什么要学习它以及它将如何帮助您...

学习sql注入:猜测数据库I recently read a great article by the esteemed craigkerstiens describing why he feels SQL is such a valuable skill for developers. This topic really resonated with me. It lined up well with notes I’d already started sketching out fo…

编程日记2024/08/05 04:30:00

C++入门经典-例6.14-通过指针连接两个字符数组

1：字符数组是一个一维数组，引用字符数组的指针为字符指针，字符指针就是指向字符型内存空间的指针变量。 char *p; char *string"www.mingri.book"; 2：实例，通过指针连接两个字符数组，代码如下&am…

编程日记2024/08/05 04:20:00