elementui 上传七牛_ElementUI的Upload上传，配合七牛云储存图片

好的，我可以回答你的问题。为了在ElementUI的Upload中使用七牛云储存图片，你需要进行以下步骤：

1. 首先，你需要在七牛云上创建一个存储空间，并获取到你的Access Key和Secret Key。

2. 然后，在你的Vue项目中安装七牛云的SDK，可以使用npm命令进行安装：

   npm install qiniu-js --save

3. 在你的Vue组件中，你需要引入ElementUI的Upload组件，并添加一个自定义的上传方法。这个方法将会在文件上传时被调用：

   <template>
     <el-upload
       class="upload-demo"
       action="/upload"
       :before-upload="beforeUpload"
       :on-success="handleSuccess"
       :on-error="handleError"
       :headers="headers"
       :data="data"
       :file-list="fileList"
       multiple>
       <el-button size="small" type="primary">点击上传</el-button>
     </el-upload>
   </template>
   
   <script>
   import { Upload } from 'element-ui';
   import Qiniu from 'qiniu-js';
   
   export default {
     components: {
       Upload
     },
     data() {
       return {
         fileList: [],
         token: '',
         key: '',
         domain: 'http://xxx.xxx.xxx.xxx/',
         headers: {
           'Authorization': '',
           'x-qiniu-url': ''
         },
         data: {
           token: '',
           key: ''
         }
       };
     },
     methods: {
       beforeUpload(file) {
         // 获取上传凭证
         let that = this;
         return new Promise((resolve, reject) => {
           axios.get('YOUR_UPLOAD_URL')
            .then(response => {
              that.token = response.data.token;
              that.key = response.data.key;
              that.headers.Authorization = `UpToken ${that.token}`;
              that.headers['x-qiniu-url'] = that.domain;
              that.data.token = that.token;
              that.data.key = that.key;
              resolve();
            })
            .catch(error => {
              reject(error);
            })
         });
       },
       handleSuccess(response, file, fileList) {
         // 上传成功回调
         console.log(response);
       },
       handleError(error, file, fileList) {
         // 上传失败回调
         console.log(error);
       }
     }
   }
   </script>

在这段代码中，我们引入了ElementUI的Upload组件和七牛云的SDK，然后在data中定义了一些变量，包括上传凭证、上传文件的key、七牛的域名、请求头和请求参数等。在beforeUpload方法中，我们向你的服务器请求上传凭证，在请求成功后将认证信息和请求参数赋值给data和headers变量。在handleSuccess和handleError方法中，我们可以处理上传成功和上传失败的情况。

4. 最后，你需要在你的服务器端实现上传凭证的生成。可以使用七牛云的SDK，也可以使用其他语言的SDK，例如Java或Python。在服务器端生成上传凭证后，将凭证和上传文件的key返回给前端。

例如，在Node.js中，你可以使用qiniu-sdk：

   const qiniu = require('qiniu');
   
   const accessKey = 'YOUR_ACCESS_KEY';
   const secretKey = 'YOUR_SECRET_KEY';
   const bucket = 'YOUR_BUCKET_NAME';
   const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
   const options = {
     scope: bucket,
     expires: 7200
   };
   const putPolicy = new qiniu.rs.PutPolicy(options);
   const uploadToken = putPolicy.uploadToken(mac);
   
   app.get('/uploadToken', (req, res) => {
     const key = req.query.filename;
     res.json({
       token: uploadToken,
       key: key
     });
   });

在这个例子中，我们使用qiniu-sdk生成上传凭证，并在/uploadToken路由中返回凭证和上传文件的key。

这样，你就可以在ElementUI的Upload中使用七牛云存储图片了。