草庐IT

vant-uploader

全部标签

vue前端直接使用element-ui的upload组件上传到阿里云OSS存储

因为公司的服务器比较拉吧,所以老大决定将数据文件等上传到阿里云服务器,通过ali-oss方式,这样的话读取文件也比较快 (能看到这说明什么安装element-ui都会了,我就不详细介绍了,直接跳过) 在执行下面操作之前,你要确定你的阿里云能看到上边这个页面  这里主要是配置读写,只有设置成公共读写,才可以前端直接上传,不需要跟后端要什么token了一、安装npmi --saveali-oss(1).在vue-clic中新建tools.js文件,(此文件主要是封装方法)letOSS=require('ali-oss')letclient=newOSS({region:'oss-cn-beijin

【Vue3+Ts project】vant4 实现触发指定表单 rules校验、setTimeout和 setInterval 区别

 一.使用vant组件 validate属性实现触发指定输入框rules校验,满足校验通过否则失败 1.给form表单绑定ref并定义值名称,然后为你想校验的表单绑定name值2.为ref的值名称定义变量名 ,然后ref值名称.value.validate('name值名称'),.then接收成功,.catch接收失败constform=ref()form.value.validate('mobilenNmber').then((result:any)=>{console.log(result);//成功后执行}).catch((err:any)=>{console.log(err);//失败

【element-UI】el-upload本地上传图片,点击表单提交和一起上传,使用formdata对象上传

el-upload本地上传图片,点击表单提交和一起上传项目需求:表单中有一项上传照片,上传时先存在本地(即先不提交)需求效果如下图:解决代码因为后端要求图片需要和其他参数一起提交,使用formdata对象携带参数,通过设置el-upload中action参数值为#,以及auto-upload(是否在选取文件后立即进行上传)为falseel-upload action="#" :show-file-list="false" :auto-upload="false":multiple="false":on-change="uploadFile"dragaccept="image/jpg,image

小程序基于vant calendar 修改成横向切换月份,点击左右两侧改变月份,并在需要的日期上加上标注

     小程序基于vantcalendar修改成横向切换月份,点击左右两侧改变月份,并在需要的日期上加上标注。效果图如上,只是简单的完成        主要的思路就是,将vant的日历控件设置成平铺,然后将minDate和maxDate分别设置成当前月的第一天和最后一天。这样日历区域就只会显示一个月的内容,然后再自己加两个按钮,分别在点击事件中去替换minDate和maxDate的值,产生是点击切换月份的效果。日历上特殊日期的标注则通过formatter函数来控制wxml中写法:一个view包着两个按钮和一个日历,按钮用定位的方法,定位到左右,把日历的标题和副标题都隐藏掉,日历里面的那个年月

Uniapp中引入Vant(完美避坑版)

写在前面:今天在做一个uniapp小程序项目,想使用以下vant组件库,但是在引入过程出现了各种各样的报错,在网上搜索了很多解决方案都不行,最后通过新建文件夹的方式解决了,分享一下解决方案注意:微信小程序中使用的是**Vantwapp**而不是**Vant**Vantwapp官网第一步:在Hbuilder中新建uniapp项目(以vue2x项目为例)第二步:通过npm安装Vant右键项目根目录,选择“在外部资源管理器打开”点击目录栏,输入cmd,进入控制台输入npmi@vant/weapp-S--production进行安装安装成功后页面会新增node_modules文件夹和package-l

使用vuedraggable图片拖拽排序并支持element-ui 图片上传upload

下载插件npminstallvuedraggable引入插件importdraggablefrom'vuedraggable';//拖动插件注册组件components:{draggable}使用~~~内容~~~事例该事例配合element-ui的el-upload使用vuedraggable组件要自己重写上传图片之后的样式,那样子才能使图片移动例子样式主要使用el-upload的样式,并对其做了简单的修改笔者还在移动图片的基础上添加了移动图片的文字信息,不需要的可自行删除设置 :show-file-list="false" 不显示el-upload的图片列表//文字信息{{item.name

微信小程序引入 Vant UI

微信小程序引入VantUI一、安装#通过npm安装npmi@vant/weapp-S--production#通过yarn安装yarnadd@vant/weapp--productiontips:npm安装vant之后如果项目根目录没有出现node_modules文件夹就要先执行npminit然后一直回车直到出现IsthisOK?(yes)输入yes回车之后再执行上面安装vant的命令二、修改app.json将app.json中的"style":"v2"去除,不关闭将造成部分组件样式混乱。三、修改project.config.json开发者创建的项目,miniprogramRoot默认为min

git : "git-upload-pack: command not found" while pushing to remote server

所以我正在使用GIT,试图将代码推送到我的远程服务器。在共享的unix主机上,不允许我拥有自己的环境变量(SSH帐户被阻止)并且没有sudo访问权限。成功地在我的/home/中安装了git尝试将代码推送到服务器返回:bash:git-upload-pack:commandnotfound$PATH变量已设置-因为git安装在我的/home/为了让事情正常进行,我不得不使用以下克隆命令:gitclone-u/home/bin/git-upload-packuser@server.com:mygitfolder本地机器/远程服务器(1.7.0.4)上相同版本的git所以据我所知,我基本上需

git : "git-upload-pack: command not found" while pushing to remote server

所以我正在使用GIT,试图将代码推送到我的远程服务器。在共享的unix主机上,不允许我拥有自己的环境变量(SSH帐户被阻止)并且没有sudo访问权限。成功地在我的/home/中安装了git尝试将代码推送到服务器返回:bash:git-upload-pack:commandnotfound$PATH变量已设置-因为git安装在我的/home/为了让事情正常进行,我不得不使用以下克隆命令:gitclone-u/home/bin/git-upload-packuser@server.com:mygitfolder本地机器/远程服务器(1.7.0.4)上相同版本的git所以据我所知,我基本上需

【微信小程序】图片上传组件“mp-uploader“(weui)

使用示例  wxmlmp-uploader files="{{files}}" max-count="{{maximgs}}" max-size="{{10*1024*1024}}" title="图片上传" tips="最多上传三张图片" size-type="{{sizeType}}" sourceType="{{sourceType}}" delete="{{true}}" select="{{selectFile}}" upload="{{uplaodFile}}" binddelete="delimg" bindfail="uploadError" bindsuccess="uplo