请写一个基于uni上传文件的组件

好的，以下是一个基于uni-app的上传文件组件的示例代码：

<template>
  <div>
    <div class="upload-btn" @click="handleClick">
      <span>上传文件</span>
      <input ref="fileInput" type="file" @change="handleChange" style="display:none" :accept="accept"/>
    </div>
    <div class="preview-container">
      <div class="preview-item" v-for="(file, index) in fileList" :key="index">
        <div class="preview-name">{{ file.name }}</div>
        <div class="preview-remove" @click="handleRemove(index)">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Upload',
  props: {
    accept: {
      type: String,
      default: '*'
    },
    maxSize: {
      type: Number,
      default: 10 * 1024 * 1024
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleClick() {
      this.$refs.fileInput.click()
    },
    handleChange(event) {
      const fileList = Array.from(event.target.files)
      if (!this.multiple) {
        fileList.splice(1)
      }
      fileList.forEach(file => {
        if (file.size > this.maxSize) {
          alert('文件过大')
          return
        }
        this.fileList.push(file)
      })
      this.$emit('change', this.fileList)
    },
    handleRemove(index) {
      this.fileList.splice(index, 1)
      this.$emit('change', this.fileList)
    }
  }
}
</script>

<style scoped>
.upload-btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.preview-container {
  margin-top: 10px;
}
.preview-item {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.preview-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-remove {
  color: #f00;
  cursor: pointer;
}
</style>

这个组件包含一个按钮和一个文件预览区域，点击按钮可以弹出文件选择框，选择文件后会将文件添加到预览区域中。用户可以通过点击删除按钮来删除文件。组件支持以下 props：

- accept：指定文件类型，可以是文件后缀名或 MIME 类型，多个类型用逗号隔开，默认为 *，即所有类型都可以上传；
- maxSize：指定文件大小的最大值，默认为 10MB；
- multiple：是否支持多文件上传，默认为 false。

组件可以通过 `change` 事件向父组件传递文件列表，父组件可以通过监听这个事件来获取文件列表。例如：

<template>
  <div>
    <upload accept="image/*" maxSize="2 * 1024 * 1024" multiple @change="handleUpload"></upload>
  </div>
</template>

<script>
import Upload from '@/components/Upload'

export default {
  components: {
    Upload
  },
  methods: {
    handleUpload(fileList) {
      console.log(fileList)
      // 省略上传代码
    }
  }
}
</script>