uniapp上传多个图片到服务器
时间: 2023-08-01 08:10:45 浏览: 108
多张图片上传到服务器
你可以通过uniapp提供的uni.uploadFile()方法来实现上传多个图片到服务器。
首先,你需要将要上传的图片存储在一个数组中。然后,使用uni.uploadFile()方法遍历数组中的每一个图片,并将其上传到服务器。以下是一个示例代码:
```
<template>
<div>
<input type="file" multiple @change="handleFileChange">
<button @click="uploadImages">上传图片</button>
</div>
</template>
<script>
export default {
data() {
return {
images: [], // 存储要上传的图片
}
},
methods: {
// 选择图片后触发
handleFileChange(event) {
const files = event.target.files
for (let i = 0; i < files.length; i++) {
this.images.push(files[i])
}
},
// 上传图片
uploadImages() {
for (let i = 0; i < this.images.length; i++) {
uni.uploadFile({
url: 'https://example.com/upload',
filePath: this.images[i].path,
name: 'file',
success: (res) => {
console.log('上传成功', res)
},
fail: (err) => {
console.log('上传失败', err)
}
})
}
}
}
}
</script>
```
在上面的代码中,我们首先定义了一个空数组`images`来存储要上传的图片。当用户选择图片后,我们使用`handleFileChange`方法将图片添加到`images`数组中。然后,当用户点击“上传图片”按钮时,我们遍历`images`数组并使用`uni.uploadFile()`方法来上传每一张图片。
需要注意的是,如果要同时上传多张图片,需要将`input`标签的`multiple`属性设置为`true`,这样用户就可以选择多张图片了。此外,由于上传文件是异步操作,因此需要在`success`或`fail`回调函数中处理上传结果。
阅读全文