Vue如何使用Element-ui表单发送数据与多张图片到后端详解

Vue是一款现代的JavaScript框架，它被广泛地应用在前端开发中。而Element-ui是一个基于Vue框架的UI库，提供了很多便捷的组件。在实际开发中，我们常常需要使用Element-ui的表单组件来发送表单数据到后台，并且也常常需要上传图片等文件。下面我们就来详细讲解一下“Vue如何使用Element-ui表单发送数据与多张图片到后端”的攻略。

1.表单提交数据

1.1 模板结构

表单提交数据需要使用<el-form>组件，其中包含多个<el-form-item>组件，每个<el-form-item>组件都是表单中的一个字段。表单的提交按钮常常使用<el-button>组件。

<template>
  <div>
    <el-form :model="formData" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="formData.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

1.2 数据验证

在提交表单数据之前，我们需要对表单中的数据进行验证。Element-ui提供了很方便的数据验证规则。我们可以在<el-form>组件上使用:rules属性来指定验证规则。

<template>
  <div>
    <el-form :model="formData" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="formData.password"></el-input>
      </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: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },

  methods: {
    // 提交表单
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，可以提交数据
        } else {
          // 表单验证失败，给出错误提示
        }
      });
    },
  },
};
</script>

1.3 发送数据

当表单数据验证通过后，我们可以使用Axios库来发送表单数据到后台。具体来说，我们需要在表单中的提交按钮的click事件中调用一个函数来发送数据：

<template>
  <div>
    <el-form :model="formData" :rules="rules">
      <!-- ...省略其他代码... -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    };
  },

  methods: {
    // 提交表单
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，可以提交数据
          const data = this.formData; // 从表单中获取数据
          axios.post('/api/login', data) // 发送数据到后台
            .then((response) => {
              // 成功响应后的处理
            })
            .catch((error) => {
              // 处理异常情况
            });
        } else {
          // 表单验证失败，给出错误提示
        }
      });
    },
  },
};
</script>

2.上传多张图片

2.1 模板结构

上传多张图片常常使用<el-upload>组件。我们需要在<el-upload>组件的属性上配置一些参数来实现上传多张图片。其中，action属性是上传图片的目标url地址，name属性是图片文件的key，limit属性是文件上传数量的最大值，multiple属性是是否支持多个文件上传。

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :name="uploadKey"
      :limit="maxCount"
      :multiple="true"
      :on-success="uploadSuccess"
      :headers="customHeaders"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
    </el-upload>
  </div>
</template>

2.2 上传参数

在上传多张图片时，我们需要把上传成功后的图片地址保存下来。通常的做法是，将这些图片地址拼接成以逗号分隔的字符串，然后将这个字符串发送到后台。我们可以在Vue组件上定义一个变量，用来保存上传成功的图片地址：

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :name="uploadKey"
      :limit="maxCount"
      :multiple="true"
      :on-success="uploadSuccess"
      :headers="customHeaders"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrls: [],
    };
  },

  methods: {
    // 上传成功
    uploadSuccess(response, file, fileList) {
      const { data } = response;
      if (data && data.url) {
        this.imageUrls.push(data.url);
      }
    },
  },
};
</script>

2.3 发送数据

当上传多张图片完成后，我们需要把保存的图片地址发送到后台。和表单提交类似，我们可以使用Axios库来发送数据。具体来说，我们需要在组件中定义一个函数来发送数据：

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :name="uploadKey"
      :limit="maxCount"
      :multiple="true"
      :on-success="uploadSuccess"
      :headers="customHeaders"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
    </el-upload>
    <el-button type="primary" @click="submitData">提交数据</el-button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageUrls: [],
    };
  },

  methods: {
    // 上传成功
    uploadSuccess(response, file, fileList) {
      const { data } = response;
      if (data && data.url) {
        this.imageUrls.push(data.url);
      }
    },

    // 提交数据
    submitData() {
      const data = {
        // 其他表单数据
        images: this.imageUrls.join(','), // 将图片地址拼接为字符串
      };
      axios.post('/api/save', data)
        .then((response) => {
          // 成功响应后的处理
        })
        .catch((error) => {
          // 处理异常情况
        });
    },
  },
};
</script>

以上就是Vue如何使用Element-ui表单发送数据与多张图片到后端的攻略，希望对你有所帮助。