<template>
  <el-upload
    ref="uploadRef"
    class="upload-demo"
    v-bind="$attrs"
    drag
    :action="url"
    multiple
    :on-change="change"
    :on-progress="progress"
    :on-remove="remove"
    :before-remove="beforeRemove"
    v-model:file-list="fileList"
    :http-request="uploadRequest"
    style="width: 50%;"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      拖拽上传/<em>点击上传</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        {{ tip }}
      </div>
    </template>
  </el-upload>
</template>

<script setup lang="jsx">
import { reactive, ref } from 'vue';
import { fileUp } from '../api';

const props = defineProps({
  url: {
    type: String,
    default: ''
  },
  tip: {
    type: String,
    default: ''
  }
})

const fileList = ref([])
const uploadRef = ref()

const localData = reactive({

})

const change = (file, files) => {
  console.log(file, 'file');
}

const progress = (UploadProgressEvent, UploadFile, UploadFiles) => {

}

const remove = (file, files) => {}

const beforeRemove = (file, files) => {}

const uploadRequest = (UploadRequestOptions) => {
  console.log(UploadRequestOptions, 'UploadRequestOptions');
  // UploadRequestOptions.data = {}
  const formData = new FormData()
  formData.append('file', UploadRequestOptions.file)
  // formData.append('params', UploadRequestOptions.data)
  fileUp(url, formData)
}

</script>

<style lang="scss" scoped>
</style>