vue前端实现附件修改

2026-02-23 22:19:41VUE

Vue前端实现附件修改功能

文件上传组件集成

使用<input type="file">或第三方上传组件如el-upload（Element UI）实现基础上传功能。需要设置accept属性限制文件类型，通过@change事件获取文件对象。

<el-upload
  action="/api/upload"
  :on-change="handleFileChange"
  :before-upload="beforeUpload">
  <el-button type="primary">选择文件</el-button>
</el-upload>

文件预览与信息展示

上传后显示文件名、大小等信息，并提供预览功能。图片类文件可用URL.createObjectURL()生成预览链接，文档类文件可调用第三方预览服务。

handleFileChange(file) {
  this.fileInfo = {
    name: file.name,
    size: (file.size / 1024).toFixed(2) + 'KB',
    url: URL.createObjectURL(file.raw)
  }
}

文件替换逻辑

保留原文件ID的同时上传新文件，提交时需同时传递新旧文件标识。使用FormData处理多文件上传。

const formData = new FormData()
formData.append('oldFileId', this.oldFileId)
formData.append('newFile', this.newFile)
axios.post('/api/updateFile', formData)

后端交互处理

上传接口需支持文件更新操作，通常需要以下参数：

业务ID（关联主数据）
原文件ID（用于删除旧文件）
新文件内容

状态管理与验证

使用Vuex或组件状态管理上传状态，添加文件类型校验、大小限制等验证逻辑。

beforeUpload(file) {
  const isLt10M = file.size / 1024 / 1024 < 10
  if (!isLt10M) {
    this.$message.error('文件大小不能超过10MB')
    return false
  }
  return true
}

错误处理与用户反馈

捕获上传过程中的异常，通过Toast/Notification组件给予操作反馈。处理网络错误、服务器错误等场景。

try {
  await updateFileApi(formData)
  this.$message.success('文件更新成功')
} catch (error) {
  this.$message.error(error.response?.data?.message || '更新失败')
}

断点续传支持（可选）

对大文件实现分片上传，记录已上传的片段。使用File.slice()方法分割文件，配合后端进行片段合并。

const chunkSize = 2 * 1024 * 1024 // 2MB
let chunks = Math.ceil(file.size / chunkSize)
for (let i = 0; i < chunks; i++) {
  const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize)
  uploadChunk(chunk, i)
}