uni-file-picker 文件上传并且实现拖拽

好的，uni-file-picker 是一款适用于 uni-app 的文件选择器组件，可以方便地进行文件上传操作，同时也支持拖拽上传的功能。

首先在页面中引入 uni-file-picker 组件：

<template>
  <view>
    <uni-file-picker @select="onSelect" @success="onSuccess" @fail="onFail" />
  </view>
</template>

<script>
  import uniFilePicker from '@/components/uni-file-picker/uni-file-picker.vue'

  export default {
    components: {
      uniFilePicker
    },
    methods: {
      onSelect(files) {
        console.log('选择了文件', files)
      },
      onSuccess(res) {
        console.log('上传成功', res)
      },
      onFail(err) {
        console.log('上传失败', err)
      }
    }
  }
</script>

在选择文件后，会触发 `select` 事件，返回一个文件列表，我们可以通过遍历列表来查看用户选择的文件。接着，当文件上传成功时，会触发 `success` 事件，返回上传的结果，当上传失败时，会触发 `fail` 事件，返回错误信息。

为了实现拖拽上传的功能，我们还需要在 `uni-file-picker` 组件中增加一些代码：

<template>
  <view class="uni-file-picker">
    <view class="uni-file-picker__drop-area" @drop="onDrop" @dragover.prevent>
      <view class="uni-file-picker__icon">
        <uni-icons type="add" size="32" color="#999"></uni-icons>
      </view>
      <view class="uni-file-picker__text">将文件拖到此区域上传</view>
    </view>
    <view class="uni-file-picker__button">
      <button type="primary" @click="onChoose">选择文件</button>
    </view>
    <input class="uni-file-picker__input" ref="input" type="file" multiple @change="onChange" />
  </view>
</template>

<script>
  export default {
    methods: {
      onDrop(e) {
        e.preventDefault()
        const files = e.dataTransfer.files
        this.$emit('select', files)
      },
      onChoose() {
        this.$refs.input.click()
      },
      onChange(e) {
        const files = e.target.files
        this.$emit('select', files)
      }
    }
  }
</script>

我们在 `uni-file-picker__drop-area` 上绑定了 `drop` 和 `dragover` 事件，分别用于监听文件拖拽和悬停操作，当用户将文件拖拽到该区域时，会触发 `drop` 事件，我们可以通过 `dataTransfer` 属性获取到用户拖拽的文件列表，然后再通过 `$emit` 方法将文件列表传递出去。

需要注意的是，在拖拽操作中，浏览器会默认打开文件，因此需要在 `dragover` 事件中调用 `preventDefault` 方法阻止默认行为，避免浏览器打开文件。

最后，在 `uni-file-picker__button` 中添加一个按钮，用于触发文件选择操作，然后在 `uni-file-picker__input` 中绑定 `change` 事件，用于监听文件选择操作。

以上就是实现 uni-file-picker 文件上传并且实现拖拽的方法。