解决JavaScript异步问题：上传文件时获取不到数组内容

为什么uploadFile中获取不到 this.safetyPhotolist[fileListLen] 内容？

在使用 JavaScript 进行文件上传时，你可能遇到了在 uploadFile 方法中无法获取到 this.safetyPhotolist[fileListLen] 内容的问题。

这通常是由于 JavaScript 异步执行机制导致的。uploadFile 方法是异步执行的，这意味着它在后台执行，而 console.log() 方法是同步执行的。

当你在调用 uploadFile 方法之前使用 console.log() 打印 this.safetyPhotolist[fileListLen] 的值时，此时 uploadFile 方法还没有执行完成，safetyPhotolist 数组可能已经被修改了，因此无法获取到原来的值。

解决方法

1. 在 uploadFile 方法中添加 console.log()

在 uploadFile 方法中添加 console.log() 方法，可以帮助你查看数组的值是否被正确修改。

this.$request.uploadFile(res.tempFilePaths[0]).then(res => {
    let resdata = JSON.parse(res.data)
    console.log(resdata.code)
    if(resdata.code == 200){
        let img = {}
        img.fileId = resdata.data.fileId
        img.fileName = resdata.data.fileName
        img.fileUrl = resdata.data.fileUrl
        if(type == 'safetyRecord'){
            this.startinfo.safetyRecordPhoto.push(img)
            this.safetyPhotolist[fileListLen] = this.imgpath + resdata.data.fileId
            console.log(this.startinfo.safetyRecordPhoto)
            console.log(this.safetyPhotolist[fileListLen]) // 在这里添加 console.log() 方法
        }
    } else {
        //上传失败，删除状态
        if(type == 'safetyRecord'){
            this.safetyPhotolist.splice(fileListLen, 1)
        }
        this.$refs.uToast.error('上传失败')
    }
})

2. 使用箭头函数

在 uploadFile 方法中使用箭头函数，可以确保 this 指向正确对象。

this.$request.uploadFile(res.tempFilePaths[0]).then((res) => {
    // ... 代码 ...
})

通过以上两种方法，你应该能够解决在 uploadFile 方法中无法获取到 this.safetyPhotolist[fileListLen] 内容的问题。

建议

为了更好地理解和解决异步问题，建议你学习和掌握 JavaScript 中的 Promise 和 async/await 等异步编程方法。