1111111111

最新推荐文章于 2024-07-22 15:13:59 发布

学后端的小明同学

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量341

点赞数 7

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_51330350/article/details/136627033

版权

<template>
  <div>
    <input type="text" v-model="templateName" placeholder="Enter Template Name">
    <input type="file" ref="fileInput" @change="handleFileChange">
    <button @click="uploadFile">Upload File</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      templateName: '', // 模板名称
      selectedFile: null, // 选择的文件
    };
  },
  methods: {
    handleFileChange(event) {
      // 处理文件选择事件
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      // 检查是否选择了文件和输入了模板名称
      if (!this.selectedFile || !this.templateName) {
        alert('Please select a file and enter a template name.');
        return;
      }

      // 创建 FormData 对象，用于包装文件和其他数据
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      formData.append('templateName', this.templateName);

      // 发送 POST 请求到后端接口
      axios.post('/api/templates/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then(response => {
        // 处理上传成功的响应
        alert(response.data);
      })
      .catch(error => {
        // 处理上传失败的情况
        alert('File upload failed.');
        console.error(error);
      });
    },
  },
};
</script>