vue文件上传

最新推荐文章于 2024-09-30 11:04:46 发布

学编程的小明同学

最新推荐文章于 2024-09-30 11:04:46 发布

阅读量333

点赞数 5

文章标签： vue.js elementui javascript

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

版权

<template>
  <div>
    <el-form :model="formData" ref="uploadForm" label-position="right" label-width="80px">
      <el-form-item label="模板名称" prop="templateName">
        <el-input v-model="formData.templateName"></el-input>
      </el-form-item>

      <el-form-item label="上传文件" prop="file">
        <el-upload
          action="/api/upload"
          :on-success="handleUploadSuccess"
          :before-upload="beforeUpload"
          :auto-upload="false"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        templateName: '',
        file: null,
      },
    };
  },
  methods: {
    handleUploadSuccess(response, file, fileList) {
      // 文件上传成功后，后端返回的文件路径
      this.formData.file = response.filePath;
    },
    beforeUpload(file) {
      // 这里可以加一些文件上传前的验证逻辑
      console.log('beforeUpload', file);
    },
    submitForm() {
      // 提交表单逻辑
      this.$refs.uploadForm.validate((valid) => {
        if (valid) {
          // 发送表单数据至后端保存到数据库
          this.saveFormDataToDatabase();
        } else {
          this.$message.error('表单验证失败！');
        }
      });
    },
    saveFormDataToDatabase() {
      // 此处可以使用axios等发送请求将表单数据保存到数据库
      console.log('保存到数据库', this.formData);
      // 示例：axios.post('/api/saveFormData', this.formData).then(response => {});
    },
  },
};
</script>

<style>
/* 样式可以根据实际需求自行调整 */
</style>