vue前端实现附件修改

2026-01-23 07:39:06VUE

Vue 前端实现附件修改

在 Vue 前端实现附件修改功能，通常涉及文件上传、预览、删除和替换等操作。以下是具体实现方法：

文件上传组件

使用 <input type="file"> 结合 Vue 的数据绑定实现文件上传功能。

vue前端实现附件修改

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileChange(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      if (!this.file) return;
      const formData = new FormData();
      formData.append('file', this.file);
      // 调用上传 API
      axios.post('/api/upload', formData).then(response => {
        console.log('上传成功', response.data);
      });
    }
  }
};
</script>

附件预览

对于图片、PDF 等文件，可以实现在线预览功能。

<template>
  <div>
    <img v-if="fileType === 'image'" :src="fileUrl" />
    <iframe v-else-if="fileType === 'pdf'" :src="fileUrl"></iframe>
  </div>
</template>

<script>
export default {
  props: {
    fileUrl: String,
    fileType: String
  }
};
</script>

附件替换

实现替换已有附件的功能，需要先删除旧文件再上传新文件。

vue前端实现附件修改

<template>
  <div>
    <button @click="deleteFile">删除附件</button>
    <input type="file" @change="handleFileChange" />
    <button @click="replaceFile">替换附件</button>
  </div>
</template>

<script>
export default {
  methods: {
    deleteFile() {
      axios.delete('/api/file/' + this.fileId).then(() => {
        this.fileUrl = '';
      });
    },
    replaceFile() {
      this.deleteFile();
      this.uploadFile();
    }
  }
};
</script>

文件类型限制

可以通过 input 的 accept 属性限制上传文件类型。

<input type="file" accept=".jpg,.jpeg,.png,.pdf" @change="handleFileChange" />

进度显示

对于大文件上传，可以显示上传进度。

axios.post('/api/upload', formData, {
  onUploadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(percentCompleted + '%');
  }
});