【element-UI】el-upload本地上传图片，点击表单提交和一起上传，使用formdata对象上传

在使用el-upload组件进行图片上传时，可以将上传的图片和表单数据一起通过FormData对象发送到服务器。以下是一个简单的例子：

<template>
  <el-form ref="form" :model="form">
    <el-form-item label="名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="图片">
      <el-upload
        ref="upload"
        action="http://example.com/upload"
        :on-success="handleSuccess"
        :on-error="handleError"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选择图片</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitForm">上传到服务器</el-button>
      </el-upload>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        name: '',
      },
    };
  },
  methods: {
    submitForm() {
      const formData = new FormData();
      // 将表单数据添加到FormData对象中
      formData.append('name', this.form.name);
      // 获取el-upload组件上传的文件
      const file = this.$refs.upload.uploadFiles[0];
      if (file) {
        // 添加文件到FormData对象
        formData.append('file', file.raw);
      }
 
      // 使用axios发送请求
      this.axios({
        method: 'post',
        url: 'http://example.com/upload',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then(response => {
        console.log('Success:', response);
      }).catch(error => {
        console.error('Error:', error);
      });
    },
    handleSuccess(response, file, fileList) {
      console.log('File uploaded successfully:', response);
    },
    handleError(err, file, fileList) {
      console.error('Error during upload:', err);
    },
  },
};
</script>

在这个例子中，我们定义了一个带有图片上传和表单元素的el-form。图片上传使用了el-upload组件，并且设置了auto-upload属性为false，这意味着文件不会自动上传，而是需要手动触发。我们通过ref属性获取到el-upload组件的引用，并在表单的提交方法中通过FormData对象将文件和表单数据一起发送到服务器。

注意：服务器端需要接收并处理multipart/form-data类型的请求体，并解析出文件和表单数据。