uniapp 之 图片 视频 文件上传

javascript 复制代码
<view class="" style="padding: 24rpx 0">
				<text>相关资料 <text class="fs-26 color-666">(图片、视频、文档不超过9个)</text> </text>
				<view class="flex align-center" style="margin-top: 17rpx;">
					<u-upload accept="all" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="9">
					</u-upload>
				</view>
			</view>
javascript 复制代码
submit() {
				if (this.fileList1.length) {
					let urls = [];
					this.fileList1.forEach(el => {
						urls.push({
							type: el.types,
							url: el.url,
						})
					});
					this.info.pic = JSON.stringify(urls);
				}
				uni.showModal({
					title: '',
					content: '确认提交?',
					success: res => {
						if (res.confirm) {
							// 创建订单
							this.$http({
								url: "/api",
								data: this.info,
							}).then(res1 => {
								uni.$u.toast('提交成功');
								setTimeout(()=>{
									this.$xf.on('/pages/mine');
								},2000)
								
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					// 接口返回数据
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					if (item.type == "video") {
						item.types = 2;
					} else if (item.type == "image") {
						item.types = 1;
					} else {
						item.types = 3;
					}
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: JSON.parse(result).data.url,
						})
					);
					fileListLen++;
				}
				console.log(this.fileList1);
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: getApp().globalData.baseURL + "/api", // 仅为示例,非真实的接口地址
						filePath: url,
						name: "file",
						header: {
							"Authorization": uni.getStorageSync("token")
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data);
							}, 500);
						},
					});
				});
			},
相关推荐
计算机专业码农一枚6 小时前
微信小程序 uniapp+vue高校社团管理
vue.js·微信小程序·uni-app
RuoyiOffice21 小时前
SpringBoot+Vue3 企业云盘系统设计:文件上传+共享权限+收藏分类+5GB空间控制——从“网盘孤岛”到“企业知识底座”
spring boot·uni-app·vue·文件管理·云盘·网盘·ruoyioffice
西洼工作室2 天前
unipp+vue3+python h5+app极验验证码集成全流程解析
前端·uni-app·全栈·极验
RuoyiOffice3 天前
SpringBoot+Vue3 实现 OA 公文外来文与归档台账:外部收文、BPM办理、三类公文统一归档
spring boot·微服务·uni-app·vue·ruoyi·anti-design-vue·ruoyioffice
云起SAAS4 天前
私域直播系统UniApp源码 多商户商城+直播带货 微信小程序+H5+安卓iOS
android·微信小程序·uni-app·私域直播系统
专科3年的修炼6 天前
uni-app移动应用开发第四章
开发语言·javascript·uni-app
q5507071776 天前
uniapp/uniappx实现原生图片编辑涂鸦、贴图、滤镜、旋转、裁剪等
uni-app
计算机学姐7 天前
基于微信小程序的校园失物招领管理系统【uniapp+springboot+vue】
java·vue.js·spring boot·mysql·信息可视化·微信小程序·uni-app
2501_915921437 天前
HTTPS前端劫持 新一代流量劫持解决方案
前端·网络协议·ios·小程序·https·uni-app·iphone
爱怪笑的小杰杰7 天前
优化 UniApp 日历组件的多语言切换:告别 setLocale 引起的 App 重启
java·前端·uni-app