封装上传文件组件

// iview的Modal组件
<Modal
    v-moel="showModal"
    title=""
    closable="" // 布尔值，是否显示右上角关闭叉叉，关闭了可以按esc
    mask-closable="" // 布尔值，是否可以点击对话框外关闭对话框
    @on-ok="" // 确认按钮方法
    @on-cancel="" // 取消按钮方法
    ok-text="" // 两个按钮的文本
    cancel-text=""
    :loading="" // 布尔值，点击确认框会一直加载中，直到手动调用Modal.remove()
>
    // 对话框内的内容
    
    <div class="cropper-wrapper">
                <div class="img-box">
                    <img class="cropper-image" id="imgId" alt />
                </div>
                
                <div class="right-con">
                    <div class="preview-box" id="previewId"></div>
                    
                    // Upload组件，点击里面嵌套的元素可以上传文件到action
                    // before-upload为上传前的方法
                    <Upload action="./" :before-upload="uploadHandle">
                        <Button style="width: 225px" type="primary"
                            >选择图片</Button
                        >
                    </Upload>
                </div>
            </div>
</Modal>

// 导入所有要用的第三方插件
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.min.css";
import * as qiNiu from "qiniu-js";
import Cookies from "js-cookie";
import request from "@/libs/request";

// 上传到action前的文件处理方法,自带一个file方法
uploadHandle(file){
     const reader = new FileReader(); // 实例化一个fileReader对象
      reader.readAsDataURL(file); //  将文件数据转成dataurl格式
      // reader,onload方法，会在文件数据被读取完后调用，event就是这个读取行为对象
      reader.onload = event => { 
        console.log(event);
        // 将数据存储
        this.insideSrc = event.target.result;
      };
      return false;
}

// 获取token
let token = Cookies.get("token");


// 获取qiniutoken的方法，每个用户都有自己的qiniu的token，只需要将用户的token传到后台就能返回
 getQiniuToken() {
      return new Promise((resolve, reject) => {
      // 调用后台封装好的qiniu的api，传入用户的token与类型
        request
          .get("/api/qiniu/token", {
            params: { token, bucket: "gemtec-editor" }
          })
          .then(data => {
          // 返回的data就是上传图片的用户的qiniu的token
          // 在new Promise的resolve(data)可以通过new Promise.then(data=>{})获取
            resolve(data);
          })
          .catch(err => {
            reject(err);
          });
      });
    },
 
 // replace方法，将图片的src替换掉，并重构cropper
 replace(src){
     this.cropper.replace(src)
     // 将存储的图片数据变成src
     this.insideSrc = src
 }
 
 // 上传到七牛的方法,参数为blob格式的数据
 uploadToQiniu(blob){
     this.getQiniuToken().then(config => {
     // 在成功获取到用户的qiniu的Token后调用upload
         // 调用qiniu提供的SDK
         qiNiu.upload(
             // 给参数
             blob, // 文件的blob格式数据
             config.ke, // 七牛传回来的key值
             config.token, // 七牛传回来的用户token
             { // 用户的id与type
                 params:{
                      userId: this.$store.state.user.userId,
                      type: "talk"
                 }
             },
             { // 配置
                 useCdnDomain:true,
                 region:qiNiu.region.z2
             }
         )
         .subscribe(
             total => {},
              error => {
                console.log(error);
              },
              response => {
              
              
              // 传回来的是图片路径,作为参数传到父组件发送到后台存储
                // #父组件内:
                // @accomplish-upload = keepFileSrc
                // keepFileUrl(src){ this.fileSrc = src}
                // 之后只要将这个this.fileSrc发送到后台存着就行了// 
                this.$emit(
                  "accomplish-upload",
                  `${config.domain}/${config.key}`
                );
                
                
                // 关闭弹框
                this.$emit("close-modal");
                this.cover = false;
              }
         )
     })
 }