先说下业务
这是一个可编辑的草稿页
这个“附件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:''})