技術標籤：iviewiview uploaddefaultFileList

在專案中使用iview中upload元件的自定義上傳列表時，根據專案的應用場景，我需要動態設定預設的顯示列表，但是在我手動修改defaultList的值後，發現頁面並無任何變化，並且圖片上傳成功後，檔案列表也不再顯示所上傳的檔案，我嘗試列印了console.log(this.$refs.upload),結果中的defaultFileList和fileList都為我設定的內容，但是單獨列印了console.log(this.$refs.upload.fileList),發現結果顯示的還是修改前的內容，這就奇了怪了？？？？？？

解決辦法

<!-- 在這裡完全按照官方文件的來 -->
<template>
    <div class="demo-upload-list" v-for="item in uploadList">
        <template v-if="item.status === 'finished'">
            <img :src="item.url">
            <div class="demo-upload-list-cover"
 
>
                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
            </div>
        </template>
        <
 
template v-else>
            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
        </template>
    </div>
    <Upload
        ref="upload"
        :show-upload-list="false"
        :default-file-list="defaultList"
        :on-success="handleSuccess"
        :format="['jpg','jpeg','png']"
        :max-size="2048"
        :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize"
        :before-upload="handleBeforeUpload"
        multiple
        type="drag"
        action="//jsonplaceholder.typicode.com/posts/"
        style="display: inline-block;width:58px;">
        <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="ios-camera" size="20"></Icon>
        </div>
    </Upload>
    <Modal title="View Image" v-model="visible">
        <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
    </Modal>
</template>
<script>
    export default {
        data () {
            return {
                defaultList: [
                    {
                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
                        'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                    },
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
                    }
                ],
                imgName: '',
                visible: false,
                uploadList: []
            }
        },
        methods: {
            // ...
        },
        mounted () {
          let aa = {
          'name': 'a42bdcc1178e62b4694c830f028db5c0',
          'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
          }
          // ********************重點來了************************
          // *********第一種方法***********
          this.defaultList.push(aa)
          // 必須先對defaultList賦值，然後在$nextTick()中在對uploadList賦值
          // 不放在$nextTick()中，那麼fileList拿到的是defaultList的最初的值，而不是修改後的值
          this.$nextTick(()=>{
            this.uploadList = this.$refs.upload.fileList;
          })

			// **********************第二種方法**********************************
			// this.uploadList = this.$refs.upload.fileList;
        },
        beforeMount () {
	        // **********************第二種方法**********************************
        	/*
        	let aa = {
          	'name': 'a42bdcc1178e62b4694c830f028db5c0',
          	'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
          	}
        	this.defaultList.push(aa)
        	*/
        }
    }
</script>

總之，要先設定defaultList,待DOM更新後在將fileList賦值給uploadList