vue+element ui上传图片到七牛云服务器

要在Vue中使用Element UI上传图片到七牛云服务器，你需要做以下几步：

1. 引入七牛云的JavaScript SDK。
2. 使用Element UI的<el-upload>组件来上传图片。
3. 使用七牛云SDK上传图片到七牛云。

以下是一个简单的示例代码：

首先，安装七牛云的JavaScript SDK：

npm install qiniu-js

然后，在你的Vue组件中使用<el-upload>和七牛云SDK上传图片：

<template>
  <el-upload
    action="#"
    list-type="picture-card"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="beforeUpload"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
</template>
 
<script>
import * as qiniu from 'qiniu-js';
 
export default {
  methods: {
    beforeUpload(file) {
      const key = `${Date.now()}-${file.name}`; // 自定义文件名
      const putPolicy = {
        scope: '你的七牛云空间名', // 替换为你的空间名
        deadline: Date.now() / 1000 + 3600 // 上传令牌过期时间
      };
      const uploadToken = qiniu.uploadToken(putPolicy); // 生成上传令牌
 
      // 初始化配置
      const putExtra = {
        fname: file.name
      };
 
      const observer = {
        next(res) {
          // 可以在这里添加上传进度处理
          console.log(res);
        },
        error(err) {
          console.error(err);
        },
        complete(res) {
          console.log('上传成功', res);
        }
      };
 
      // 上传文件
      qiniu.upload(file, key, uploadToken, putExtra, observer);
 
      // 阻止直接上传到服务器，使用七牛云SDK上传
      return false;
    },
    handleSuccess(response, file, fileList) {
      // 上传成功后的处理
    },
    handleError(err, file, fileList) {
      // 上传失败后的处理
    }
  }
};
</script>

在这个示例中，我们使用了beforeUpload钩子函数来处理文件上传前的逻辑。我们生成了上传令牌uploadToken，然后使用七牛云提供的qiniu.upload函数来进行上传操作。这样就可以实现在Vue中使用Element UI上传图片到七牛云服务器的功能。