Vue.js实现doc文件下载链接按钮及编辑保留原有上传文件问题咨询

问题1：a标签实现文件下载的配置方法 #

你当前使用的是Vue框架，直接动态绑定a标签的href属性和download属性即可实现下载：

1. 假设你从接口获取的表单数据存在formData对象中，每个文件字段对应的值就是后端返回的文件相对地址/唯一标识
2. 以Brd Doc对应的下载链接为例，修改代码如下：

<input
  type="file"
  ref="softCopy1"
  v-on:change="softCopyAttach1"
/><a :href="`http://45xxxxxxxx/${formData.brd_doc}`" download>Download</a><br /><br>

3. 其余字段依次替换对应属性即可：Sow Doc对应formData.sow_doc、Srs Doc对应formData.srs_doc，以此类推。
   补充说明：如果后端返回的brd_doc等字段值已经是带域名的完整下载地址，直接把完整地址赋值给href即可，不需要拼接基础接口地址。如果下载接口需要鉴权（比如要带请求头token），就不能直接用a标签跳转，需要先通过请求工具把文件以blob格式拉取到本地，再动态生成a标签触发下载。

问题2：编辑时保留未修改的原有文件 #

这个问题的核心原因是编辑提交表单时，未修改的文件字段没有把原有值传给后端，后端默认空值就清空了对应字段、删除关联文件，按以下步骤修改即可：

1. 进入编辑页面时，把接口返回的所有原有文件字段值（brd_doc、sow_doc等）全部保存到表单对应的变量中
2. 每个文件上传的change事件（比如softCopyAttach1）里，只有当用户选择了新的文件时，才覆盖对应文件字段的值，用户没操作的字段保持原有接口返回的值不变
3. 提交表单时，所有文件字段都要传给后端，不要只传修改过的字段：如果是用FormData格式提交，未上传新文件的字段直接传原有字符串路径即可，不要传空值
4. 后端配合做逻辑兼容：如果收到的文件字段是字符串类型，就保留原有文件不做修改；如果是File二进制类型，才执行旧文件删除、新文件上传的逻辑

内容的提问来源于stack exchange，提问作者alprazolam