vue element 图片上传七牛云

最近在将项目中的图片上传改成了上传七牛云。

1、首先第一步我们得学习下官网。

https://developer.qiniu.com/kodo/sdk/1283/javascript 官网

我目前的项目是vue + element ，上传其实是有两个方案的，我这就一一举例：
方案一： 我们直接用element 的el-upload 组件的data 属性绑定参数上传。

     <el-upload
              :action="envs"
              :data="QiniuData"
              :http-request="upqiniu"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-error="uploadError"
              :before-upload="beforeUpload"
              :on-success="handleSuccess"
              accept="image/jpeg, image/jpg, image/png"
              :file-list="fileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>

data() {

return {
       QiniuData: {    //这里是直接绑定data的值
        key: "", //图片名字处理
        token: "", //七牛云token
        data: {},
        bucket: " "
            },

      }
}

接下来就要找后端要token 接口获取token.

    gettoken() {
      //获取七牛云token
      let url = " .....";
      this.$axios
        .get(url)
        .then(res => {
          if (res.code == 200) {
            console.log(res.data.token);
            this.QiniuData.token = res.data.token;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

定义key 的值，获取文件名称

  beforeUpload(file) {
      // console.log(file);
      let suffix = file.name;
      // let key = "upload/009/" + encodeURI(`${suffix}`);
    //   let key = encodeURI(`${suffix}`)
    let  key = `upload_pic_${new Date().getTime()}_${file.name}`

      // let key = new Date () + Math.floor(Math.random()*100) + encodeURI(`${suffix}`)
      this.QiniuData.key = key;
      return this.QiniuData;
    },

这第一种方案就可以直接上传图片成功了。
接下来第二种方案：
1、第一步：我们要安装七牛依赖。

npm install qiniu-js

导入文件

import * as qiniu from 'qiniu-js'

然后我们就要安装官网步骤写代码了，

//  我们要使用http-request  定义事件
   <el-upload
              :action="envs"
              :http-request="upqiniu"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-error="uploadError"
              :before-upload="beforeUpload"
              :on-success="handleSuccess"
              accept="image/jpeg, image/jpg, image/png"
              :file-list="fileList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>

js部分

    upqiniu(e) {
       var file = e.file //Blob 对象，上传的文件
       let config = {
          useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
          region: qiniu.region.z2     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
        };

        let putExtra = {
          fname: this.QiniuData.key,  //文件原文件名
          params: {}, //用来放置自定义变量
          mimeType: null  //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
        };
   var observable = qiniu.upload(file, this.QiniuData.key, this.QiniuData.token, putExtra, config);
        observable.subscribe({
          next: result => {
            // 主要用来展示进度
            console.log(result);

          },
          error: errResult => {
            // 失败报错信息
            console.log(errResult);
          },
          complete: result => {
            // 接收成功后返回的信息
            console.log(result);
      
          }
        });
    },

方案二的token 获取跟方案一一样，我这里就重复写了。

各位小伙伴有什么疑问，欢迎留言探讨。