uniapp,app实现多个图片,然后点击按钮保存上传
时间: 2023-08-12 13:11:07 浏览: 215
您可以使用uniapp中的uni.chooseImage方法来选择多个图片,然后将这些图片显示在页面上。接着,您可以使用uni.uploadFile方法将这些图片上传到服务器,并在上传成功后将它们保存。最后,您可以使用uni.showToast方法提示用户上传成功。
以下是一个实现多图上传的示例代码:
```
<template>
<view>
<view v-for="(item,index) in fileList" :key="index">
<image :src="item"></image>
</view>
<button @click="chooseImage">选择图片</button>
<button @click="uploadImage">上传图片</button>
</view>
</template>
<script>
export default {
data() {
return {
fileList: [], // 图片列表
uploadList: [], // 上传成功后的图片列表
};
},
methods: {
// 选择图片
chooseImage() {
uni.chooseImage({
count: 9, // 最多选择9张图片
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
this.fileList = this.fileList.concat(res.tempFilePaths);
},
});
},
// 上传图片
uploadImage() {
uni.showLoading({
title: '上传中',
});
let uploadCount = 0;
for (let i = 0; i < this.fileList.length; i++) {
uni.uploadFile({
url: 'your upload API', // 上传地址
filePath: this.fileList[i],
name: 'file',
formData: {
// 上传的其他参数
},
success: (res) => {
uploadCount++;
const data = JSON.parse(res.data);
if (data.code === 0) {
this.uploadList.push(data.url); // 将上传成功后的图片保存到uploadList中
}
if (uploadCount === this.fileList.length) {
uni.hideLoading();
uni.showToast({
title: '上传成功',
});
}
},
});
}
},
},
};
</script>
```
以上代码仅供参考,实际开发过程中需要根据具体需求进行调整。
阅读全文