van-uploader怎么回显数据比较好

一般使用van-uploader传递附件给后端之后，在编辑回显的时候，返回值类似这样：

而van-uploader里面绑定值的类型是File这样的类型，如果是图片，还需要能够点击预览，只是根据回显的数据，无法做到。
我的解决办法是，将van-uploader放到van-field的#input里面，将回显来的附件，放到van-uploader的前面。

<van-field name="uploader" label="">
    <template #input>
        <div v-for="(item, index) in fileList" :key="index" class="file-item">
            <van-image width="80" height="80" :src="item.src" />
            <div class="del" @click="delImg(item, index)">
                <van-icon name="cross" color="#fff" size="11" />
            </div>
        </div>
        <van-uploader v-model="form.fileList" :max-size="10 * 1024 * 1024" accept="image/*"
            :after-read="afterRead" :before-delete="deleteImg" />
    </template>
</van-field>

回显来的附件数据和上传的附件数据是分开的，这样二者的删除是互不影响的。然后为回显元素加上删除的图标样式，这样做的效果就和原生附件上传很相似了。

另外，如果回显的附件信息不是图片，可以只显示文件名，具备删除功能即可。
在编辑提交的时候，对原来的附件信息，只需要传递附件的id给后端；对新增的附件，就传递File给后端，这样二者之间就不需要判断是否有重复的情况，简化了代码逻辑。