vant uploader组件，回显文件、文件名

先说下业务
这是一个可编辑的草稿页
这个“附件1.docx”是在pc端上传的，保存在了草稿中，然后要在app中要回显出文件的名称和类型，图片不需要回显名字，如下图，

刚开始的时候不回显文件名称，

先来解决下回显的问题：
看看后台返回的参数

得到返回参数之后整理一下，放到这个附件数组中 fileList

	if (data.flowAttachments.length > 0) {
		for (let i = 0; i < data.flowAttachments.length; i++) {
			let item = data.flowAttachments[i]
			item = {
				id: item.attachmentId,
                name: item.attachmentName,
                path: item.attachmentPath,
                size: item.attachmentSize,
                type: item.attachmentType,
                //前面这几个的id、name、path、type有没有都无所谓，命名也无所谓
                //但是下面这两个必须是url和file
                url: "/vm/rest/flow/fault/getFileStream?attachmentPath=" + item.attachmentPath + "&attachmentName=" + item.attachmentName + '&app=1', //这个url请求后台获取二进制流文件，使图片可以回显出来
                file: new File([], item.attachmentName, {}) //就是这个new File([], item.attachmentName, {}),有他就可以回显文件名称了
            }
			this.fileList.push(item)
		} 
	}

html代码和回调方法

<van-uploader
	multiple
    v-model="fileList" //绑定的数组fileList:[]
    upload-icon="plus" //修改上传组件icon样式
    :max-count="5"
    name="gzsmwjys" //标识符
    :show-upload="true"
    :before-delete="beforeDelete"
    :after-read="afterRead"
/>

<script>
		//删除前的回调	
		beforeDelete(file, detail) {
            //删除的附件从fileList中删掉
            this.fileList.splice(detail.index, 1);
            //这后面不重要 根据自己业务需要去处理
            let delFileId = this.fileList[detail.index].id;
            this.delFileIds.push(delFileId);
        },
        //上传附件
        afterRead(file, detail) {
			this.$nextTick(() => {
	            var formdata = new FormData(); //new一个FormData
	            formdata.append('file', file.file)  //把上传的图片信息放入，传给后台
	            uploadFile(formdata).then(response => {
	            	//这个返回结果就是上传附件的id，给filList中的附件们加个id
	            	this.fileList[detail.index].id = response.data
	            	//在整个已上传附件的id集合..具体是感觉业务需要去处理
	            	this.fileIds.push(response.data)
	            })
            })
        },
</script>

看看formdata.append('file', file.file)中的file这个

总结一下子：

这个组件要回显图片两种方法：
1、提供图片的base64字符串
直接把base64字符串加前缀之后，封装成一个obj放入fileList，就可以直接回显图片

let obj = {content:'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUEBAQEAwUEBAQGBQUGC...'}
this.fileList.push(obj)

2、提供文件的二进制流
（这种能回显图片因为后端能接受这样的请求方式。但现在很多框架不支持没有完整请求头的请求，比如下面这个直接把url放进去，那么就会请求不到后端图片回显失败，这种方式还是有一定局限性的）

//直接丢进去
let url = "/vm/rest/flow/fault/getFileStream?attachmentPath=" + item.attachmentPath + "&attachmentName=" + item.attachmentName + '&app=1'
this.fileList.push(url)

想要回显文件称就参考官网提供的这个方法 new File([],'文件名',{type:''})