山东定制型网站建设推广/网站如何优化关键词排名
先说下业务
这是一个可编辑的草稿页
这个“附件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和fileurl: "/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-uploadermultiplev-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一个FormDataformdata.append('file', file.file) //把上传的图片信息放入，传给后台uploadFile(formdata).then(response => {//这个返回结果就是上传附件的id，给filList中的附件们加个idthis.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:''})
