Javascript Firestore：更新数组中的对象。使用无效数据调用函数FieldValue.arrayUnion（）。不支持嵌套数组

我想更新项目中的图片。 我有一个“产品”集合，它有“示例”字段来保存图片URL。 现在URL在数组中。 我想要实现的是在上传新图片后更新一个数组并显示新图片

但我犯了个错误

使用无效数据调用函数FieldValue.arrayUnion（）。嵌套 不支持数组

我尝试了console.log（this.product.samples）。结果显示了两个数组（旧图片数组和新图片数组）

这是我的密码

 <template>
    <div>
        <div class="ml-5 mb-5 picture-size">
            <span>The pictures has to be up to 800px X 1000px</span>
        </div>
            <b-row>
                 <b-col md="6" class="mx-auto">
                    <p>Sample picture</p>
                    <img :src="product.samples" alt="" class="picture">
                    <div class="upload mx-auto mt-5">
                        <input type="file"  name="imageStorefront" @change="uploadSample" id="file" accept="image/*">
                            <label for="file" class="Upload-image">
                                Upload
                            </label>
                    </div>
                    <div class="d-flex justify-content-center m-3">
                        <div v-if="showSample">
                            <b-button class="loginbutton-color" type="submit">
                                <spring-spinner
                                    :animation-duration="3000"
                                    :size="27"
                                    color="#ff1d5e"
                                    class="loading"
                                />
                            </b-button>
                        </div>
                    </div>
                </b-col>
            </b-row>
       
        
    </div>
</template>

<script>
import ErrorBar from '@/components/ErrorBar'
import { SpringSpinner } from 'epic-spinners'
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
const firestore = require("firestore");
require("firebase/firestore");
const db = firebase.firestore();

    export default {
        name: "FoodSample",
        components: {
            SpringSpinner
        },
        data() {
      return {
            product: {
                samples: []
            },
            showSample: false,
          }
        },
        created() {
            let ref = db.collection('Product').doc(this.$route.params.id)
            ref.onSnapshot(snapshot => {  //DocSnapshot
                if (snapshot.exists) {
                   this.product.samples = snapshot.data().sample
                } else {
                    console.log("No such document!");
                }  
            })
        },
        methods: {

            uploadSample(e) {
                if(e.target.files[0]) {
                    this.show = true
                    let file = e.target.files[0];
                    var storageRef = fireApp.storage().ref('Sample/'+  '_'  + file.name);//uniquenameにする
                    let uploadTask = storageRef.put(file);
                    uploadTask.on('state_changed', (snapshot) => {
                    }, (error) => {
                        console.log(error)
                    }, () => {
                        uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                            this.product.samples.push(downloadURL)
                        })
                        .then(() => {
                            this.submitSample()
                        })
                        .then(() => {
                            console.log('finished')
                        });
                    });
                }
            },

            submitSample() {
                let ref = db.collection('Product').doc(this.$route.params.id)
                
                console.log(this.product.samples)
                ref.get().then(snapshot => {  //DocSnapshot
                    ref.update({
                        sample: firebase.firestore.FieldValue.arrayUnion(this.product.samples)
                    })
                })
            }

        }
    }
</script>

图片必须高达800px 1000px
样图

上传
从“@/components/ErrorBar”导入ErrorBar
从“epic微调器”导入{SpringSpinner}
从“@/plugins/firebase”导入fireApp
const firebase=require（“firebase”）；
const firestore=require（“firestore”）；
要求（“消防基地/消防仓库”）；
const db=firebase.firestore（）；
导出默认值{
名称：“食物样本”，
组成部分：{
弹簧纺纱机
},
数据（）{
返回{
产品：{
样本：[]
},
示例：错误，
}
},
创建（）{
let ref=db.collection（'Product'）.doc（this.$route.params.id）
ref.onSnapshot（快照=>{//DocSnapshot
if（snapshot.exists）{
this.product.samples=snapshot.data（）.sample
}否则{
log（“没有这样的文档！”）；
}  
})
},
方法：{
上传样本（e）{
if（e.target.files[0]）{
this.show=true
让file=e.target.files[0]；
var storageRef=fireApp.storage（）.ref（'Sample/'+'.'+file.name）；//uniquenameにする
让uploadTask=storageRef.put（文件）；
uploadTask.on（'state_changed'，（快照）=>{
}，（错误）=>{
console.log（错误）
}, () => {
uploadTask.snapshot.ref.getDownloadURL（）。然后（（downloadURL）=>{
this.product.samples.push（下载URL）
})
.然后（（）=>{
this.submitSample（）
})
.然后（（）=>{
console.log（'finished'）
});
});
}
},
submitSample（）{
let ref=db.collection（'Product'）.doc（this.$route.params.id）
console.log（this.product.samples）
ref.get（）.then（快照=>{//DocSnapshot
参考更新({
示例：firebase.firestore.FieldValue.arrayUnion（this.product.samples）
})
})
}
}
}

如何删除旧图片阵列并添加新图片阵列