VForm3的文件上传后的一种文件回显方式

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio

演示地址：RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/

更多nbcio-boot功能请看演示系统 

gitee源代码地址

后端代码： https://gitee.com/nbacheng/nbcio-boot

前端代码：https://gitee.com/nbacheng/nbcio-vue.git

在线演示（包括H5） ： http://122.227.135.243:9888

一、官方的帮助

   官方好像也没有说清楚这个回显方式，不过看代码，就是原来的名称与url正确就好了。

但实际上传成功后，回显的数据是不正常的，只是response里的数据是正常的，按道理应该是正常上传后应该回写数据，这样就不需要我们单独写代码了。

二、在提交申请表单的时候进行处理

如下代码：

const submit = async () => {
    const data = await vfRenderRef.value.getFormData();
    const Widgetlist = await vfRenderRef.value.getFieldWidgets();
    //替换文件上传成功后的文件名称与url，以便后面回显用
    let fileUpload = Widgetlist?.filter(item => item.type === "file-upload");
    fileUpload?.forEach((fileitem) => {
      data[`${fileitem.name}`]?.forEach((dataitem,index) => {
        data[`${fileitem.name}`][index].name = data[`${fileitem.name}`][index].response.data?.newFileName;
        data[`${fileitem.name}`][index].url = data[`${fileitem.name}`][index].response.data?.url;
      })

    })
    //替换图片上传成功后的文件名称与url，以便后面回显用
    let picUpload = Widgetlist?.filter(item => item.type === "picture-upload");
    picUpload?.forEach((picitem) => {
      data[`${picitem.name}`]?.forEach((dataitem,index) => {
        data[`${picitem.name}`][index].name = data[`${picitem.name}`][index].response.data?.newFileName;
        data[`${picitem.name}`][index].url = data[`${picitem.name}`][index].response.data?.url;
      })

    })

    if (definitionId.value) {
      const res = await startProcess(definitionId.value, JSON.stringify(data));
      proxy?.$modal.msgSuccess(res.msg);
      const obj = { path: "/work/own" };
      proxy?.$tab.closeOpenPage(obj);
    }
  }

三效果图如下：