uniapp+uniCloud实现批量上传图片到云端(解决h5端跨域问题)

批量上传图片到云端

流程：
1.uni.chooseImage选择图片，返回图片临时路径
2.根据图片临时路径数量，循环调用uniCloud.uploadFile上传图片到云存储，返回图片线上路径
3.调用云函数保存图片线上路径，以供后期查询

upload() {// 选择图片，默认不设置count属性的话最多9张uni.chooseImage({success(res) {// 通过遍历调用uniCloud.uploadFile来批量上传for (let i = 0; i < res.tempFilePaths.length; i++) {uni.showLoading({title: "上传中..."})let filePath = res.tempFilePaths[i] // 选择图片的临时路径const name = res.tempFiles[i].name // 选择图片的名称.后缀名uniCloud.uploadFile({filePath, // 必传，要上传的文件对象临时路径cloudPath: Date.now() + "-" + name, // 必传，保存在云端的文件名，这样写上传后就是原本的名称与后缀名success(res) {let imageUrl = res.fileID //云端返回的图片地址// 调用云函数保存图片数据uniCloud.callFunction({name: "addImage", // 传给云函数的数据，可根据自身需求进行改动data:{imageUrl: imageUrl, // 图片路径createTime: Date.now() // 创建时间},success: res => {console.log(res)},fail: err => {console.log(err)},complete: () => {}})},fail(err) {console.log(err)},complete() {uni.hideLoading()}})}}})},

云函数addImage

需要创建一个tableImages表

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {const collection = db.collection('tableImages') // 云数据库里的表名 ，记录上传图片到云存储后返回的fileIDconst res = await collection.add(event) // event为客户端上传的参数return res
};

uncloud-h5端上传图片跨域

微信端和手机端都能正常使用，但h5端会遇到跨域问题

需要在unicloud-web控制台>跨域配置>新增域名>设置安全域名

比如我前端h5地址是http://172.16.0.152:8081/#/

则安全域名设置为172.16.0.152:8081

uniapp+uniCloud实现批量上传图片到云端(解决h5端跨域问题)相关推荐

*uni-app之H5端跨域问题解决方案
场景:跨域问题只存在于浏览器端 ,App和小程序不存在跨域问题. 产生原因:由于uni-app是标准的前后端分离模式开发h5应用时如果前端代码和后端接口没有部署在同域服务器,就会被浏览器报跨域. 前 ...
170222、使用Spring Session和Redis解决分布式Session跨域共享问题
使用Spring Session和Redis解决分布式Session跨域共享问题原创 2017-02-27 徐刘根 Java后端技术前言对于分布式使用Nginx+Tomcat实现负载均衡,最常用 ...
通过设置Ionic-Cli代理解决ionic serve跨域调试问题
通过设置Ionic-Cli代理解决ionic serve跨域调试问题参考文章: (1)通过设置Ionic-Cli代理解决ionic serve跨域调试问题 (2)https://www.cnblog ...
vb跨域访问ajax,解决AJAX的跨域访问-两种有效示例
这篇文章主要为大家详细介绍了解决AJAX的跨域访问-两种有效示例,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小玲来看看吧!新的W3C策略实现了HTTP跨域访问,还 ...
十秒解决开发环境跨域问题——取消浏览器同源策略
解决开发环境跨域问题方法有很多,设置代理什么的略显繁琐:接下来介绍一个十秒解决开发环境跨域问题的方法--取消浏览器同源策,解决所有跨域问题,以谷歌浏览器为例. 一:Windows ①:关闭浏览器 ②: ...
Vue Nginx反向代理配置解决生产环境跨域
Vue本地代理举例: module.exports = {publicPath: './',devServer: {proxy: {'/api': {target: 'https://movie.do ...
使用Spring Session和Redis解决分布式Session跨域共享问题
大家可以关注一下公众号"Java架构师秘籍" 前言对于分布式使用Nginx+Tomcat实现负载均衡,最常用的均衡算法有IP_Hash.轮训.根据权重.随机等.不管对于哪一种负载 ...
解决vue axios跨域请求发送两次问题
解决vue axios跨域请求发送两次问题参考文章: (1)解决vue axios跨域请求发送两次问题 (2)https://www.cnblogs.com/wordblog/p/12171875. ...
Vue解决接口访问跨域问题
Vue解决接口访问跨域问题参考文章: (1)Vue解决接口访问跨域问题 (2)https://www.cnblogs.com/wangfugui/p/10123126.html (3)https:/ ...

uniapp+uniCloud实现批量上传图片到云端(解决h5端跨域问题)

批量上传图片到云端

云函数addImage

uncloud-h5端上传图片跨域

uniapp+uniCloud实现批量上传图片到云端(解决h5端跨域问题)相关推荐

最新文章

热门文章