Question

嗨，我正在使用vue和axios上传文件

无法识别onUploadProgress内部的列表

代码

data: ()=>({
        list: [
          { id:0, icon: 'image', iconClass: 'blue white--text', title: 'Vacation itinerary', file:"asasf.png", progress:100 },
          selectedFile: null
        ]
    }),
    methods:{
        async startUpload(){
            let formData = await new FormData();
            await formData.append('file', this.selectedFile);
            this.selectedFile=null

            let config = {
                onUploadProgress: function(progressEvent){
                    console.log(this.list) //is null
                    this.list[id].progress = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
                }
            };

            this.$axios.$post('/upload/insert', formData, config)
                .then(response => {
                    this.list[id].progress=100
                    this.list[id].file=response.data.path
                })
                .catch(error => {
                    console.log(error)
                })
        }
    }

孤独16中的

console.log（this.list）为空

Answer 1

只需将onUploadProgress函数更改为箭头函数，否则this将与onUploadProgress的上下文而不是组件相关。

async startUpload(){
            let formData = await new FormData();
            await formData.append('file', this.selectedFile);
            this.selectedFile=null

            let config = {
                onUploadProgress: (progressEvent) => {
                    console.log(this.list) //is null
                    this.list[id].progress = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
                }
            };

            this.$axios.$post('/upload/insert', formData, config)
                .then(response => {
                    this.list[id].progress=100
                    this.list[id].file=response.data.path
                })
                .catch(error => {
                    console.log(error)
                })
        }

无法读取/写入功能中的数据

1 个答案: