uniapp选中多张图片或者视频（多图上传）

因为产品需求，市面上找不到和他类似的组件。只能自己写

这个是封装的函数，单图的不知道有没有问题，多图上传没问题，

因为小程序的函数不支持多图上传，只能一张张的调上传接口，所以我用了Promise.all方法来，处理异步里面单独的上传，在所以上传跑完，函数才返回出链接合成的数组

js方面的代码：

// 多图上传
// type: 1图片和视频，2图片
// count：最大数量
export function headerUploads(type = 1, count = 1) {let mediaType = ['image', 'video']if (type == 2) {mediaType = ['image']}return new Promise((resolve, reject) => {let UploadList = []uni.chooseMedia({// 最多可以选择的图片总数count,// 最长视频时间maxDuration: 30,mediaType,success: res => {//启动上传等待中...  uni.showLoading({title: '上传中',});console.log('上传的是：', res);let upRes = resvar srcObj = {type: res.type}Promise.all(upRes.tempFiles.map((item, index) => {return new Promise((resolve1, reject1) => {if (upRes.tempFiles[index].duration > 31) {uni.showToast({title: "上传视频不能超过30秒！",icon: 'none',})return}uni.uploadFile({// 上传地址url: BASE_URL + '/api/common/upload',name: 'file',filePath: upRes.tempFiles[index].tempFilePath,formData: {// 'file': res.tempFilePaths[0]},header: {'content-type': 'application/x-www-form-urlencoded',// "token": uni.getStorageSync('token') || ''},success: (resz) => {console.log('后端返回', (JSON.parse(resz.data).data));uni.hideLoading()// 单图if (type == 2) {resolve(JSON.parse(resz.data).data)} else {srcObj.src = JSON.parse(resz.data).data// resolve(srcObj)// setTimeout(() => {UploadList.push(srcObj)srcObj = {type: res.type}// }, 200)console.log('循环中', index, upRes.tempFiles.length);resolve1()}},fail: (resz) => {console.log('失败返回', resz);uni.hideLoading()reject()}})});})).then(() => {console.log('循环后', UploadList);resolve(UploadList)}).catch((error) => {console.log('循环后', UploadList);resolve(UploadList)})},complete: compRes => {}});})
}

html方面当时写的太烂了，就不弄出来了

uniapp选中多张图片或者视频（多图上传）相关推荐

uni-app 小程序多图上传
uni-app 小程序多图上传: 官方提示说,App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API.所以跨端的写法就是循环调用本API 步骤: //1.首先通过 uni.c ...
tinymce 多图上传，上传文件，上传视频，单图上传
tinymce 多图上传,上传文件,上传视频,单图上传参考材料引入插件单图上传,文件上传,图片上传多图上传参考材料 http://tinymce.ax-z.cn/more-plugins/a ...
uniapp、uview——图片上传（单图上传、多图上传、多组照片上传、图片回显）
一.简介 uView组件的上传功能,单图上传.多图上传等. 官方文档地址: https://www.uviewui.com/components/upload.html 二.步骤 (一)单图上传 1. ...
uniapp - 全平台兼容的 “多图上传“ 功能，搭配 uview 组件库中的 upload 上传组件（附带详细的示例源码及注释，可直接复制使用或简单修改）
效果图使用 uniapp 开发,多平台全端兼容的多图上传功能,支持限制个数及移除等. 组件库使用的是 uview 框架,上传组件基于 Upload组件,功能完美无bug. 准备阶段 Upload组件 ...
elementui展示多张图片_Element-ui实现合并多图上传（一次请求多张图片）
前言工作中碰到需要多图上传,在使用element-ui解决过程中碰到一些问题,在这里分享给大家. 环境: Springboot+Vue+Element-ui 正文这次上传使用的是Elemet-ui ...
后盾网lavarel视频项目---图片上传
后盾网lavarel视频项目---图片上传一.总结一句话总结: 前端还是普通的前端操作,前端上传图片的地址就是图片上传的路由,后端代码也很简单 public function uploader(R ...
wangEditor 修改 “视频”菜单，上传视频（替换原来的输入地址），三次修改
参考文章:https://blog.csdn.net/m0_37885651/article/details/83660206 发现图标失效.做了些修改效果图: 上传返回数据(单个视频上传): da ...
android短视频拍摄并上传,手机微视怎么玩？微视视频制作并上传的教程
从下载微视app到顺利发布自己录制的小视频,一步两步,步步有图,亲自体验. 软件名称:腾讯微视短视频分享软件 for android V8.10.2.588 安卓版软件大小:96.5MB更新时间:2 ...
微信jssdk多图上传
在微信里面开发,我们可以使用微信jssdk 的图片上传思路基本上是手机选中图片,上传到微信服务器,加入临时素材库(好像三天就过期了) 然后再服务端去微信的服务器把图片下载到本地. 如果有自己的c ...

uniapp选中多张图片或者视频（多图上传）

uniapp选中多张图片或者视频（多图上传）相关推荐

最新文章

热门文章