uniapp 之 图片 视频 文件上传

<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>

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);},});});},