网站空间和域名价格,网站建设的功能都需要有哪些,高品质网站设计,北京东直门+网站建设一、功能介绍
需要哦用户点击加号上传图片#xff0c;并展示所上传图片和能够删除和预览 二、功能实现
采用的uniapp#xff0c;创建了一个view容器包裹加号图标和展示的图片。
内部展示图片超过9张时候#xff0c;加号图片隐藏 view classimg-list/…一、功能介绍
需要哦用户点击加号上传图片并展示所上传图片和能够删除和预览 二、功能实现
采用的uniapp创建了一个view容器包裹加号图标和展示的图片。
内部展示图片超过9张时候加号图片隐藏 view classimg-list//图片显示列表循环展示view v-for(item,index) in pushData.photoList :keyindex classimg-list-box//图片展示和图片点击唤醒uni的预览删除image :srcitem modeaspectFit classimg-item tapimgTypeSelect(item)/image/view//加号添加图样式自定义就好view v-ifpushData.photoList.length 9 classicon-camera tapselectType/view/view
点击加号
唤起uni的向上弹出操作菜单
uni.showActionSheet(OBJECT)
点击后又使用看图片选择API
从底部向上弹出操作菜单
OBJECT参数说明
参数类型必填说明平台差异说明titleString否菜单标题App、H5、支付宝小程序、钉钉小程序、微信小程序 3.4.5仅真机有效alertTextString否警示文案同菜单标题微信小程序仅真机有效itemListArrayString是按钮的文字数组微信、百度、抖音小程序数组长度最大为6个itemColorHexColor否按钮的文字颜色字符串格式默认为#000000App-iOS、飞书小程序不支持popoverObject否大屏设备弹出原生选择按钮框的指示区域默认居中显示App-iPad2.6.6、H52.9.2successFunction否接口调用成功的回调函数详见返回参数说明failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
popover 值说明仅App生效
值类型说明topNumber指示区域坐标使用原生 navigationBar 时一般需要加上 navigationBar 的高度leftNumber指示区域坐标widthNumber指示区域宽度heightNumber指示区域高度
success返回参数说明
参数类型说明tapIndexNumber用户点击的按钮从上到下的顺序从0开始
示例
uni.showActionSheet({itemList: [A, B, C],success: function (res) {console.log(选中了第 (res.tapIndex 1) 个按钮);},fail: function (res) {console.log(res.errMsg);}
});
实际代码 selectType() {let that thislet itemL [拍照, 从相册选择照片]uni.showActionSheet({itemList: itemL,success: function(res) {if (res.tapIndex 0) {uni.chooseImage({sourceType: [camera], // 拍照选择success: function(res) {res.tempFilePaths.forEach(path {uni.uploadFile({url: 11111111, //后端接口地址filePath: path,name: file,formData: {},header: {content-type: multipart/form-data,},success: function(uploadFile) {let uploadFiles JSON.parse(uploadFile.data)that.pushData.photoList.push(uploadFiles.data);}})})}});}if (res.tapIndex 1) {uni.chooseImage({count: 9 - that.pushData.photoList.length,sourceType: [album], //从相册选择success: function(res) {res.tempFilePaths.forEach(path {uni.uploadFile({url: https:1111111, //后端接口地址filePath: path,name: file,formData: {},header: {content-type: multipart/form-data,},success: function(uploadFile) {let uploadFiles JSON.parse(uploadFile.data)that.pushData.photoList.push(uploadFiles.data);}})})}});}
从本地相册选择图片或使用相机拍照。
uni.chooseImage(OBJECT) App端如需要更丰富的相机拍照API如直接调用前置摄像头参考plus.camera 微信小程序从基础库 2.21.0 开始 wx.chooseImage 停止维护请使用 uni.chooseMedia 代替。 OBJECT 参数说明
参数名类型必填说明平台差异说明countNumber否最多可以选择的图片张数默认9见下方说明sizeTypeArrayString否original 原图compressed 压缩图默认二者都有App、微信小程序、支付宝小程序、百度小程序extensionArrayString否根据文件拓展名过滤每一项都不能是空字符串。默认不过滤。H5(HBuilder X2.9.9)sourceTypeArrayString否album 从相册选图camera 使用相机默认二者都有。如需直接开相机或直接选相册请只使用一个选项cropObject否图像裁剪参数设置后 sizeType 失效App 3.1.19successFunction是成功则返回图片的本地文件路径列表 tempFilePathsfailFunction否接口调用失败的回调函数小程序、AppcompleteFunction否接口调用结束的回调函数调用成功、失败都会执行
crop 参数说明
参数名类型必填说明平台差异说明qualityNumber否取值范围为1-100数值越小质量越低仅对jpg格式有效。默认值为80。widthNumber是裁剪的宽度单位为px用于计算裁剪宽高比。heightNumber是裁剪的高度单位为px用于计算裁剪宽高比。resizeBoolean否是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注设置为false时在裁剪编辑界面显示图片的像素值设置为true时不显示
success 返回参数说明
参数类型说明tempFilePathsArrayString图片的本地文件路径列表tempFilesArrayObject、ArrayFile图片的本地文件列表每一项是一个 File 对象
File 对象结构如下
参数类型说明pathString本地文件路径sizeNumber本地文件大小单位BnameString包含扩展名的文件名称仅H5支持typeString文件类型仅H5支持
选择图片后继续调用上传接口
uni.uploadFile(OBJECT)
将本地资源上传到开发者服务器客户端发起一个 POST 请求其中 content-type 为 multipart/form-data。 如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后可通过此接口将本地资源上传到指定服务器。另外选择和上传非图像、视频文件参考uni-app 选择和上传非图像、视频文件 - DCloud问答。
OBJECT 参数说明
参数名类型必填说明平台差异说明urlString是开发者服务器 urlfilesArray是files和filePath选其一需要上传的文件列表。使用 files 时filePath 和 name 不生效。App、H5 2.6.15fileTypeString见平台差异说明文件类型image/video/audio仅支付宝小程序且必填。fileFile否要上传的文件对象。仅H52.6.15支持filePathString是files和filePath选其一要上传文件资源的路径。nameString是文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容headerObject否HTTP 请求 Header, header 中不能设置 Referer。timeoutNumber否超时时间单位 msH5(HBuilderX 2.9.9)、APP(HBuilderX 2.9.9)、微信小程序、支付宝小程序、抖音小程序、快手小程序formDataObject否HTTP 请求中其他额外的 form datasuccessFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数调用成功、失败都会执行
注意
App支持多文件上传微信小程序只支持单文件上传传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
files参数说明
files 参数是一个 file 对象的数组file 对象的结构如下
参数名类型必填说明nameString否multipart 提交时表单的项目名默认为 filefileFile否要上传的文件对象仅H52.6.15支持uriString是文件的本地地址
success 返回参数说明
参数类型说明dataString开发者服务器返回的数据statusCodeNumber开发者服务器返回的 HTTP 状态码 展示 图片和图片的点击预览删除
将图片上传后获取到每一张上传的图片返回地址push到展示的图片列表中 image :srcitem modeaspectFit classimg-itemtapimgTypeSelect(item)/image
点击图片后再次调用向上弹出交互API:uni.showActionSheet
利用点击图片本身的url进行数组寻找点击预览调用
uni.previewImage(OBJECT)
预览图片。
这里对图片只是一个展示用所以将存入的图片列表放入就可以预览
其他转发之类的需求可以参考文档中的
longPressActionsObject否长按图片显示操作菜单如不填默认为保存相册
点击删除按钮则根据url寻找index进行列表的截取
// 图片状态选择
imgTypeSelect(item) {let that thisuni.showActionSheet({itemList: [预览, 删除],success: function(res) {if (res.tapIndex 0) {console.log(删除1, that.pushData.photoList);uni.previewImage({current: item,urls: that.pushData.photoList})}if (res.tapIndex 1) {let index that.pushData.photoList.findIndex(url url item);if (index ! -1) {that.pushData.photoList.splice(index, 1);}}}});},
不太美观的css
添加图标的css是采用背景图自行替换或使用别的写法 .icon-camera {display: flex;justify-content: center;align-items: center;width: 210rpx;height: 210rpx;border-radius: 6rpx;margin: 5rpx 0rpx 0rpx 5rpx;background-color: #f4f5f7;// image{// width: 100%;// height: 100%;// }background: url(../iconadd.png);background-size: 100%;}// 媒体列表.img-list {display: flex;flex-wrap: wrap;margin-bottom: 20rpx;}.img-list-box {display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;}.img-item {width: 210rpx;height: 210rpx;margin: 5rpx;border-radius: 6rpx}
