vue element-ui 异步上传文件到七牛云

首先，你需要在你的 Vue 项目中安装 `qiniu-js` 包，这个包可以帮助你将文件上传到七牛云。

安装命令：`npm install qiniu-js`

然后，在你的 Vue 组件中引入 `qiniu-js` 包，代码如下：

import * as qiniu from 'qiniu-js'

接下来，我们需要实现异步上传文件到七牛云的功能。假设我们已经有一个上传文件的方法 `handleUpload`，代码如下：

handleUpload(file) {
  const token = 'your-qiniu-upload-token' // 替换成你的七牛云上传凭证
  const key = file.name // 文件名作为七牛云存储的文件名
  const config = {
    useCdnDomain: true, // 是否使用七牛云的 CDN 域名
  }
  const putExtra = {
    fname: file.name, // 文件原始名字
    params: {}, // 上传额外参数
    mimeType: null // 上传文件类型
  }
  const observable = qiniu.upload(file, key, token, putExtra, config)
  const observer = {
    next(res) {
      // 上传进度回调
      console.log(res.total.percent)
    },
    error(err) {
      // 上传失败回调
      console.log(err)
    },
    complete(res) {
      // 上传成功回调
      console.log(res)
    }
  }
  const subscription = observable.subscribe(observer) // 执行上传操作
}

在上面的代码中，我们通过 `qiniu.upload` 方法来执行文件上传操作，参数依次为：

- `file`: 要上传的文件对象
- `key`: 上传到七牛云后的文件名
- `token`: 七牛云上传凭证
- `putExtra`: 上传额外参数，包括文件名、上传参数和文件类型
- `config`: 上传配置，包括是否使用七牛云的 CDN 域名

在上传过程中，我们通过观察者模式来监听上传进度、上传成功和上传失败事件，并执行相应的回调函数。

最后，你可以在你的组件中调用 `handleUpload` 方法来上传文件，例如：

<el-upload
  action=""
  :before-upload="handleUpload"
>
  <el-button type="primary">点击上传</el-button>
</el-upload>

在上面的代码中，我们使用了 Element UI 的上传组件，并将 `before-upload` 属性设置为 `handleUpload` 方法，这样就可以触发文件上传操作了。