this[`fileList${event.name}`].splice(event.index, 1)
时间: 2024-04-12 07:34:19 浏览: 32
这段代码是用来从名为`fileList${event.name}`的数组中删除指定索引位置的元素。它使用了动态属性访问的语法,`${event.name}`会将`event.name`的值插入到属性名中,以访问相应的数组。然后使用`.splice(event.index, 1)`方法来删除指定索引位置的元素,其中`event.index`表示要删除的元素的索引,`1`表示要删除的元素数量为1。
相关问题
// 新增图片 async afterRead(event) { // 当设置 multiple 为 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] this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: result })) fileListLen++ } }, uploadFilePromise(url) { return new Promise((resolve, reject) => { let a = uni.uploadFile({ url: 'http://192.168.2.21:7001/upload', // 仅为示例,非真实的接口地址 filePath: url, name: 'file', formData: { user: 'test' }, success: (res) => { setTimeout(() => { resolve(res.data.data) }, 1000) } }); }) }
这段代码实现了在 uniapp 中新增图片上传,其中包括以下步骤:
1. 在模板中通过 `uni-upload` 组件实现文件上传:
```
<template>
<div>
<div>
<div>单个文件上传</div>
<uni-upload :name="'1'" :file-list="fileList1" :max-count="1" :show-file-list="true" :preview-image="true" @after-read="afterRead"></uni-upload>
</div>
<div>
<div>多个文件上传</div>
<uni-upload :name="'2'" :file-list="fileList2" :max-count="3" :show-file-list="true" :preview-image="true" @after-read="afterRead"></uni-upload>
</div>
</div>
</template>
```
2. 在 `afterRead` 方法中实现文件上传:
```
async afterRead(event) {
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]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
}
```
3. 在 `uploadFilePromise` 方法中使用 Promise 实现文件上传:
```
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: 'http://192.168.2.21:7001/upload', // 仅为示例,非真实的接口地址
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
setTimeout(() => {
resolve(res.data.data)
}, 1000)
}
});
})
}
```
这样就可以在 uniapp 中实现图片上传了。需要注意的是,此处的代码中使用了 `async/await` 和 Promise,需要在项目中启用 async/await 语法和 Promise 支持。
this.$refs.upload.submit()
this.$refs.upload.submit()是一个方法调用,用于提交上传文件的请求。它会自动调用httpRequest方法,并将参数传递给该方法。在httpRequest方法中,通过param.file获取到上传的文件对象,并使用FormData对象将文件和其他参数添加到表单中。然后使用axios.post方法将表单数据发送到服务器进行处理。[1][2]
需要注意的是,如果将提交函数用在http-request钩子中,并且fileList中有多个文件,那么每个文件都会执行一次请求接口,无法实现只请求一次上传多个文件的功能。[2]
此外,在增加文件和删除文件时,需要相应地对file-list进行增减操作,以保持文件列表的正确性。可以使用el-upload组件的on-remove和on-change属性来处理文件的删除和变化事件。[3]
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)