npm install element-ui

// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">Нажмите, чтобы загрузить</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // Загрузка файл Успешный обратный вызов
      console.log(response);
    },
    beforeUpload(file) {
      // Крючок перед загрузкой возвращает false Можно отменить загрузку
      console.log(file);
      return true;
    },
  },
};
</script>

<style scoped>
/* Отрегулируйте стиль в соответствии с реальной ситуацией */
.upload-demo {
  display: inline-block;
}
</style>

<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary" @click="manualUpload">Загрузка вручную</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // Загрузка файл Успешный обратный вызов
      console.log(response);
    },
    beforeUpload(file) {
      // Крючок перед загрузкой возвращает false Можно отменить загрузку
      console.log(file);
      return true;
    },
    manualUpload() {
      // Ручной триггер Загрузка файла
      this.$refs.upload.submit();
    },
  },
};
</script>

<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary" @click="manualUpload">Загрузка вручную</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // Загрузка файл Успешный обратный вызов
      console.log(response);
    },
    beforeUpload(file) {
      // Крючок перед загрузкой возвращает false Можно отменить загрузку
      console.log(file);

      // Ручная обработка файлов, такая как сжатие, преобразование формата и т. д.

      return true;
    },
    manualUpload() {
      //

 Ручной триггер Загрузка файла
      this.$refs.upload.submit();
    },
  },
};
</script>

<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :http-request="customRequest"
    :on-remove="handleRemove"
  >
    <el-button size="small" type="primary" @click="manualUpload">Загрузка вручную</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // Используется для хранения списков файлов.
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // Загрузка файл Успешный обратный вызов
      console.log(response);
    },
    beforeUpload(file) {
      // Крючок перед загрузкой возвращает false Можно отменить загрузку
      console.log(file);

      // Ручная обработка файлов, такая как сжатие, преобразование формата и т. д.

      return true;
    },
    customRequest(option) {
      // Пользовательская функция загрузки для Одновременной загрузка
      const formData = new FormData();
      formData.append('file', option.file);
      
      // Здесь можно добавить дополнительные параметры
      // formData.append('name', 'file');

      // Отправить запрос
      this.$axios.post(option.action, formData)
        .then(response => {
          option.onSuccess(response, option.file, this.fileList);
        })
        .catch(error => {
          option.onError(error, option.file, this.fileList);
        });
    },
    handleRemove(file, fileList) {
      // Обратный вызов при удалении файла
      console.log(file, fileList);
    },
    manualUpload() {
      // Ручной триггер Загрузка файла
      this.$refs.upload.submit();
    },
  },
};
</script>

<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :http-request="customRequest"
    :on-remove="handleRemove"
    :file-list="fileList"
    :limit="3" <!-- Ограничить количество загружаемых файлов -->
    :max-size="1024" <!-- Ограничить размер файла в единицах KB -->
    :accept="'image/*'" <!-- Ограничить тип загружаемых файлов -->
  >
    <el-button size="small" type="primary" @click="manualUpload">Загрузка вручную</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // Используется для хранения списков файлов.
    };
  },
  methods: {
    // ...(Другие методы такие же, как указано выше)
  },
};
</script>