vue+ant desgin pro 上传图片至七牛云

1. 在public文件目录的index.html中引入

<script src="http://mryt.kangdaedu.com/es6-promise.min.js"></script>
<script src="http://mryt.kangdaedu.com/aliyun-oss-sdk-5.3.1.min.js"></script>
<script src="http://mryt.kangdaedu.com/aliyun-upload-sdk-1.5.0.min.js"></script>

2. 在main.js文件中添加

import UUID from "vue-uuid"
Vue.use(UUID)

3. 在page页面中引入

import * as qiniu from "qiniu-js";

4. 在项目命令窗口安装

1、qiniu-js
2、vue-uuid

5. 后端接口返回数据参数，如下图所示：

6. 前端编辑代码如下：

<!--点击按钮-->
<a-button @click="showModal">
  <a-icon type="upload" />上传logo
</a-button>

<!-- 上传图片弹框 -->
<a-modal title="上传图片" v-model="isUploadingImg">
 <!-- 图片上传选择按钮 -->
 <p>
   <a href="#" class="file">
     <input
       type="file"
       @change="selectImg($event,'uploadImg')"
       accept=".jpg, .png, .gif"
       size="400"
     />上传图片
   </a>
 </p>
 <!-- 进度条 -->
<a-progress :percent="UploadPhotoPercent" size="small" status="active" v-if="isShowProgress" />
</a-modal>

<!-- 定义参数-->
imgUuid: "", //图片uuid
isShowProgress: false, //控制进度条的显示
previewImage: "", //图片地址
UploadPhotoPercent: 0, //上传进度条
isUploadingImg: false, //控制上传图片弹框
isEditImg: false, //控制修改图片弹框
editPhotoPercent: 0, //修改图片上传进度条
isShowEditProgress: false, //控制修改进度条的显示


selectImg(event, type) {
   var that = this;
   if (type == "uploadImg") {
     that.isUploadingImg = true;
     that.isShowProgress = true;
   } else if (type == "editImg") {
     that.isEditImg = true;
     that.isShowEditProgress = true;
   }
   if (event.target.files.length > 0) {
     var file = event.target.files[0];
     var imgName = file.name;
     var idx = imgName.lastIndexOf(".");
     if (idx != -1) {
       var ext = imgName.substr(idx + 1);
       ext = ext.toLowerCase();
       if (ext != "jpg" && ext != "png" && ext != "gif") {
         that.$message.error(
           "请选择正确的图片格式上传，图片为jpg、png格式！"
         );
       } else {
         that.uploadImgToQiniu(file, type);
       }
     } else {
       that.$message.error("图片格式为jpg、png格式，在上传！");
     }
   }
 },

// 上传图片到七牛云
  uploadImgToQiniu(file, type) {
    var that = this;
    this.$api.getUploadToken().then(res => {
      var uptoken = res.data.data.uploadToken;
      var key = that.$uuid.v1(); // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
      let config = {
        useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
        region: qiniu.region.z1 // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
      };
      let putExtra = {
        fname: file.name, //文件原文件名
        params: {}, //用来放置自定义变量
        mimeType: ["image/jpeg", "image/png", "image/gif"] //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
      };
      var observable = qiniu.upload(file, key, uptoken, putExtra, config);
      observable.subscribe({
        next: result => {
          // TODO  进度条进度更新
          if (type == "uploadImg") {
            that.isShowProgress = true;
            that.UploadPhotoPercent = Math.ceil(result.total.percent * 100);
          } else if (type == "editImg") {
            that.isShowProgress = true;
            that.UploadPhotoPercent = Math.ceil(result.total.percent * 100);
          }
        },
        error: errResult => {
          that.$message.error("上传失败，失败原因：" + errResult);
          if (type == "uploadImg") {
            that.isShowProgress = false;
          } else if (type == "editImg") {
            that.isShowEditProgress = false;
          }
        },
        complete: result => {
          if (type == "uploadImg") {
            that.previewImage = "http://file.jsb.kangdaedu.com/" + key;
            that.imgUuid = key; //获取图片uuid
            that.isUploadingImg = false;
            that.isShowProgress = false;
            that.$message.success("上传成功");
          } else if (type == "editImg") {
            that.imgurl = "http://file.jsb.kangdaedu.com/" + key;
            that.logo = key; //获取图片uuid
            that.isEditImg = false;
            that.isShowEditProgress = false;
            that.$message.success("上传成功");
          }
        }
      });
    });
  },