uniapp 之 图片 视频 文件上传
2023-12-13 12:08:59
<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);
},
});
});
},
文章来源:https://blog.csdn.net/weixin_42268006/article/details/134965724
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!