一次上传多张图片到七牛云的方法

之前提过这个 后来用了TDesign之后 把之前所有系统里的图片上传组件都删除改了TDesign里的这个 样式好看 引入也简单 还可以长按拖拽调整顺序 记录一下用法

引入的话 在app.json或者哪个文件用 哪个文件的.json文件里写代码就行

"usingComponents": { "z-upload": "./miniprogram_npm/tdesign-miniprogram/upload/upload" },

然后在.wxml文件里使用组件

<z-upload max="20" //最大图片上传张数allow-upload-duplicate-file="{{false}}" //是否允许重复上传相同文件名的文件draggable="{{dragConf}}" //是否允许图片拖拽media-type="{{['image']}}" //上传媒体类型files="{{topPicArr}}" gridConfig="{{gridConfig}}"bind:add="picAddTap" bind:remove="picDeleteTap" bind:drop="dropEndClick" />

在.js文件里的data里 还要增加下下面的设置

data:{ gridConfig: { column: 3,//每组上传3张图片 width: 200,//图片宽度200px height: 200,//图片高度200px }, dragConf: {//是否支持拖拽排序 vibrate: false,//长按时是否振动 collisionVibrate: false,//碰撞时是否振动 },}

组件引用完之后的样式是这样 点击+号就可以上传多张 上传完之后 多个图片可以长按拖拽移动 很好用 不卡顿

有几个点需要注意下

files="{{topPicArr}}"

这里的topPicArr是自定义的数组名称 这个数组的格式需要在服务端或者前端这边重新组装一下 不然组件会识别不了

{ name:"hbkcl63a2o.png", type:"image", url:"xxx.jpg" }

差不多就这样 上传 删除的方法自己按照业务实现下就可以

后来还把拖拽这个部分实现到了 商品排序 分类排序等其他功能里面 晚点有空了全都一个个发上来记录下

保持好奇 不断进步 下期见~