vue 七牛云 上传图片

在 Vue 中使用七牛云进行图片上传，需要先在七牛云申请一个空间并获取 Access Key 和 Secret Key，然后安装相关的依赖库。

1. 安装依赖库：

npm install qiniu-js vue-qiniu-upload --save

2. 在 Vue 中引入依赖：

import QiniuUpload from 'vue-qiniu-upload'
import * as qiniu from 'qiniu-js'

3. 在 Vue 组件中使用：

<template>
  <div>
    <qiniu-upload
      :domain="domain"
      :access-key="accessKey"
      :secret-key="secretKey"
      :path="path"
      :size="size"
      :accept="accept"
      :before="beforeUpload"
      :complete="uploadComplete"
      :error="uploadError"
    >
      <button>上传图片</button>
    </qiniu-upload>
  </div>
</template>

<script>
export default {
  components: {
    QiniuUpload
  },
  data () {
    return {
      domain: 'your-qiniu-domain',
      accessKey: 'your-access-key',
      secretKey: 'your-secret-key',
      path: '/upload',
      size: 10 * 1024 * 1024,
      accept: 'image/*'
    }
  },
  methods: {
    beforeUpload (file) {
      // 可以在这里进行一些上传前的操作，比如图片压缩等
    },
    uploadComplete (res) {
      // 上传完成后的回调
      console.log('上传完成', res)
    },
    uploadError (err) {
      // 上传失败的回调
      console.log('上传失败', err)
    }
  }
}
</script>

以上代码中，`QiniuUpload` 组件是我们刚才引入的依赖库中提供的，通过传入相关参数就可以进行图片上传了。在 `beforeUpload` 方法中可以对图片进行一些处理，比如压缩等操作。`uploadComplete` 和 `uploadError` 分别是上传成功和上传失败后的回调函数，可以进行一些相关的操作。

注意，上传图片之前需要在七牛云中进行配置，具体可以参考七牛云的文档。