<template>
  <div style="display: flex; flex-direction: column; justify-content: center">
    <input
      type="file"
      @change="uploadImage"
      ref="fileInput"
      style="display: none"
    />
    <el-button type="success" @click="openFileInput">上传照片</el-button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Upload",
  data() {
    return {
      photo: "",
    };
  },
  methods: {
    openFileInput() {
      this.$refs.fileInput.click();
    },
    uploadImage(event) {
      var file = event.target.files[0];
      var formData = new FormData();
      formData.append("image", file);
      formData.append("token", "1c17b11693cb5ec63859b091c5b9c1b2");
      axios
        .post("http://8.141.3.231:40061/api/index.php", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((response) => {
          this.$emit("upload-success", response.data.url);
          this.$message({ type: "success", message: "上传成功" });
        })
        .catch((error) => {
          this.$message.error("上传图片失败:" + error);
        });
    },
  },
};
</script>
