uniapp使用u-album不显示或无效

最新推荐文章于 2024-06-04 11:36:48 发布
最新推荐文章于 2024-06-04 11:36:48 发布
阅读量1.8k 收藏 2
点赞数 1
分类专栏： uniapp 文章标签： uni-app 小程序 微信公众平台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/drnb666/article/details/126819644
版权

遇到问题：uniapp 内使用uview的u-album相册组件，微信开发者工具内预览正常，手机小程序预览不显示

解决方法：原因是因为小程序后台没有配置downloadFile合法域名，因为该组件有一个可预览后保存图片到手机的功能，配置好后等待几分钟刷新开发者工具项目配置和重新编译一下就可以了，踩坑特此记录一下

在这里插入图片描述

DRNB666
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序qcloud-applet-album.7z
01-06
总的来说，"微信小程序qcloud-applet-album.7z"的压缩包可能是一个教学示例或实际项目，涵盖了微信小程序开发的基本技术，特别是结合腾讯云服务进行图片管理的实践。学习和研究这个压缩包中的内容，对于提升微信小...
cos-album:解析腾讯云cos桶xml生成相册,同时也是图床的显示页面
05-04
cos-album Step1 < link rel =" stylesheet " type =" text/css " href =" cos-album.min.css?v=1.1.6 " >< script type =" text/javascript " src =" cos-album.min.js?v=1.1.6 " > </ script >...
uView使用Album 相册时，单张图片不显示问题
撑起自己半边天
03-18 1318
uView使用Album 相册时，单张图片不显示问题
uni-app + uView 仿朋友圈页面
qq_20819025的博客
01-20 2564
最近自己做的云开发练手项目，写了个类似朋友圈的玩意，需要的小伙伴可以参考一下。 第一次写文章，技术上也是新手出道，如有不足，请各位大佬指正。 废话不多说，直接上代码 主要组件部分 <template> <view class="u-page" style="margin: 0 15rpx;"> <view class="u-demo-block"> <view style="display: flex; margin-bottom: 5px
uniapp uni-popup内容被隐藏问题
qq_41956361的博客
06-04 706
uni-popup 内容被隐藏
uniapp 懂你找图 专辑页面home-album
weixin_51867622的博客
10-03 231
<template> <scroll-view class="album_scroll_view" scroll-y @scrolltolower="handleToLower"> <view class="album_swiper"> <swiper autoplay indicator-dots circular> <swiper-item v-for="item in banner" :key="item..
uni-app 预览图片
晨的一朵云的博客
01-30 3758
预览图片功能还不完全，未完全在各种移动设备上测试成功
uview中 u-album相册显示样式支持自定义
qq_38909255的博客
04-15 368
有特殊的显示要求的时候，使用插槽进行显示，position值改为‘absolute’即可在页面上显示ui需要的样式，从而实现预览功能。缺点：u-album相册的展示效果却有点蠢，很难构建自己需要的样式，比如：头像使用、产品详情图片等。position(非比传): 定位值有‘absolute’、‘relative’urls（比传）: 图片的链接，可以是 数组，也可以是以“，”隔开的字符串；优点：uview中u-album相册的预览功能还是可以的。
uniapp的u-album组件自定义删除功能
高性价比服务器就选：蓝易云
03-08 490
这样，你就可以在u-album组件中实现自定义的删除功能了。需要注意的是，这个删除操作只是在前端删除了图片项，并没有在后端删除对应的图片文件，如果你需要在后端也删除对应的图片文件，你还需要在删除操作后发送一个请求到后端，让后端删除对应的图片文件。
自定义Uview的Album 相册组件添加删除功能
Codernmx
03-25 2006
功能需要，直接使用了Album组件 不用自己去调样式了，直接可以大图预览，对超出限制数量的照片可以折叠 修改组件 先找到组件中图片的位置。添加一格删除图标，给图标添加点击事件,我这里显示图片的地址是包含文件id的 从删除的点击事件在预览地址中取出文件id就行传回父组件就想行。 这里有个事件冒泡，需要处理下，不然会点击也有预览效果 <view @click.stop="del(item)" class="delIcon"> <image src="@/static/delete.png
Photo_Album_System.zip_Enjoy_photo-album
09-24
7. **移动设备支持**：考虑到大多数用户可能使用手机或平板电脑来浏览照片，系统需要有响应式设计，兼容各种屏幕尺寸和操作系统。 8. **多语言支持**：为了全球用户，系统可能支持多种语言，提供更好的用户体验。 ...
processwire-simple-flickr-album:使用 ProcessWire api 将专辑下载到页面的简单脚本
05-31
使用此模板在 Processwire 上创建页面创建或编辑将创建相册的页面。 就我而言，它是/pictures/ 重要提示：为此/pictures/页面添加访客编辑/创建权限，否则脚本将无法运行在您的服务器上创建一个临时目录并将其设置...
koa-album：基于Koa2的网络相册应用
02-03
阿拉伯胶 一个基于koa和node的网络相册应用程序。一个基于Koa2的Node的网络相册应用。 预览 本地预览 安装依赖项/安装依赖包 npm install start service /启动服务 node app.js 服务器将在本地主机8888上启动。...
vue 动态渲染本地图片不显示的解决方法
weixin_49066399的博客
02-23 588
动态渲染本地图片显示不出来的解决方法
vue element 单张图片上传，不展示图片
凡尘
06-16 884
vue element 图片上传
vue实现点击按钮后自动刷新页面
Zing_ing的博客
05-17 2384
在按钮点击事件中添加 window.location.reload();
uni-app的常用 使用指南
多分享一点点，共同进步一点点
01-05 2866
uni-app的常用 使用指南
uni-app+uview： uni.chooseImage选择相册/拍照后使用u-upload进行上传
lcc0628的博客
12-13 8147
uniapp使用u-upload拍照上传或选择相册上传，做一个类似朋友圈一样选择图片并能实时预览和删除的场景，图片在点击发布时和其他内容一起保存到数据库
uniapp实现原生方式上传图片,视频(可直接进行拍照,录取视频)
qq_43787947的博客
07-14 1097
template模板。
uniapp 的uni-file-picker手动上传完整案例
最新发布
06-22
UniApp 的 `uni-file-picker` 是一个用于文件选择和上传的功能组件。以下是一个基本的手动上传文件的完整案例： 首先，在你的 `.vue` 文件中，引入所需的依赖并设置组件的属性： ```html <template> <view> <button @click="openFilePicker">选择文件</button> <input type="file" ref="uploadFile" :multiple="true" @change="handleFileChange" style="display: none;"> <div v-if="selectedFiles.length"> <p>已选择文件: {{ selectedFiles.length }}</p> <ul> <li v-for="(file, index) in selectedFiles" :key="index"> {{ file.name }} <button @click="uploadFile(file)">上传</button> </li> </ul> </div> </view> </template> <script> export default { data() { return { selectedFiles: [], }; }, methods: { openFilePicker() { uni.showActionSheet({ title: '选择文件', items: ['相册', '文件管理', '取消'], success: (res) => { if (res.actionIndex === 0) { // 相册 uni.getImagePicker({ sourceType: ['album', 'camera'], // 可选值：['album', 'camera', 'temp'], 默认值：['album'] success: (pickerRes) => { this.handleImagePickerResult(pickerRes); }, }); } else if (res.actionIndex === 1) { // 文件管理 this.$refs.uploadFile.click(); } }, }); }, handleImagePickerResult(pickerRes) { if (pickerRes.resultType === 'image') { this.selectedFiles.push({ name: pickerRes.fileName, url: pickerRes.tempFilePath, // 这里是临时文件路径，如果需要上传，需转换为其他格式 }); } else if (pickerRes.resultType === 'file') { this.selectedFiles.push({ name: pickerRes.fileName, url: pickerRes.filePath, // 这里是永久文件路径，可以直接上传 }); } }, uploadFile(file) { uni.uploadFile({ url: '你的服务器上传接口地址', // 替换为实际的上传接口 filePath: file.url, // 使用选择的文件的路径 header: {}, // 如果有需要，可以添加请求头 success: (res) => { console.log('上传成功', res.data); }, fail: (err) => { console.error('上传失败', err); }, }); }, handleFileChange(e) { this.selectedFiles = e.target.files; }, }, }; </script> ``` 在这个例子中，我们创建了一个按钮触发文件选择器，当用户选择文件后，会显示所选文件列表并提供上传功能。`uploadFile` 方法负责实际的文件上传。 相关问题--: 1. 在这个案例中，`uni.showActionSheet` 和 `uni.getImagePicker` 分别用来做什么？ 2. 如何处理图片和非图片类型的文件上传？ 3. 如何在实际项目中替换`'你的服务器上传接口地址'`？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值