微信小程序 Vant 上传文件

上传附件

使用van-uploader组件

 <van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" max-count="{{1}}"deletable="{{ true }}" bind:delete="deleteAll" accept="all"><van-button custom-class="fup" round icon="plus" type="primary" size="small">上传附件</van-button></van-uploader>

file-list 可以绑定已经上传的图片列表，并展示图片列表的预览图
bind:after-read 文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址
max-count 属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域
deletable 是否展示删除按钮
bind:delete 删除图片
accept 接受的文件类型, 可选值为all(所有类型) media(媒体音频) image(图片) file(文件) video(视频)

afterRead 回调函数

afterRead (event) {const {file} = event.detail; //获取图片信息const that = this;console.log(file);// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式wx.uploadFile({url: `${devConfig.url}/MaterialUploadFile`, // 调用后端上传文件接口filePath: file.url, //图片地址name: "uploadfile",// 这个须得与后端一致success (res) {// 上传完成需要更新 fileListconsole.log(res);const datamarks = res.data.match(/(\/\U.*?\")/g)[0];const data2 = datamarks.match(/[^\"]*/g)[0]; // 见下面console.log(data2);that.data.materialObjet.fileList.splice(0, 0, {...file,url: devConfig.imgUrl+data2}); // 将后端返回的地址添加到fileList中，用于显示出改文件that.setData({fileList: that.data.materialObjet.fileList});}});},

上面的正则是由于我后端返回的地址有问题，所以使用了正则匹配

后端代码

[WebMethod][ScriptMethod(ResponseFormat = ResponseFormat.Xml)]public string MaterialUploadFile(){ReceiveResultData resultData = new ReceiveResultData();try{HttpPostedFile file = HttpContext.Current.Request.Files["uploadfile"];// 上面的name须得与"uploadfile"一致string date = "物料台账_" + DateTime.Now.ToString("yyyy-MM");string filePath = ConfigHelper.UploadFilePath + "物料台账\\" + date + "\\";string path = ConfigHelper.DownLoadFilePath + filePath;path = path.Replace("\\\\", "\\");//虚拟路径处理if (ConfigHelper.DownLoadFilePath.IndexOf("\\") == 0){path = "\\" + path;}//判断文件是否存在,不存在则创建if (Directory.Exists(filePath) == false)//如果不存在就创建file文件夹{Directory.CreateDirectory(filePath);}ResultMessage rm = UploadifyHelper.UploadifyWX(file, filePath, true);//resultData.ResultState = rm.Success == "ok" ? 1:0;resultData.ResultMsg = rm.Data;return JsonHelper.Serializer(resultData.ResultMsg);}catch (Exception ex){throw ex;}}

微信小程序 Vant 上传文件相关推荐

微信小程序直接上传文件到阿里云OSS组件封装
微信小程序直接上传文件到OSS 1. 封装公共方法在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...
【微信小程序】上传文件到阿里云OSS
小程序上传文件到OSS也是利用OSS提供的PostObject接口来实现表单文件上传到OSS 步骤1:配置Bucket跨域访问客户端进行表单直传到OSS时,会从浏览器向OSS发送带有Origin的请 ...
微信小程序实现上传文件如图片/word excel到服务器
说道上传文件,首先要想到微信官方文档给的API,wx.uploadFile({ }) 通过这个API来达到上传至服务器的效果:代码示例如下接下来我们先来说说上传图片功能,这个比较简单一些上传图片: ...
微信小程序上传接口php,微信小程序API 上传、下载
微信小程序API 上传.下载 wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口 ...
微信小程序头像上传(一)
记录一下自己实现微信小程序头像上传的过程. wxml部分( 用了vant组件库 ): <view class="info"><van-imageroundwidt ...
微信小程序实现上传视频功能（后端代码是java）
微信小程序实现上传视频功能(后端代码是java) 1.前端 wxml文件 <image bindtap="uploadVideo" length="3" ...
微信小程序录音上传功能
微信小程序录音上传录音弹窗wxml代码:  <view class="cui-record" hidden="{{isHid ...
**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...

微信小程序 Vant 上传文件

上传附件

微信小程序 Vant 上传文件相关推荐

最新文章

热门文章