前端上传七牛云服务器（企业级方案）+入门

以往我们所知道的都是前端上传到后端，后端回传地址。后端是指自己服务器，而不是花钱~嫩来的第三方。第三方除了贵没什么别的坏处。

为什么用七牛

• 什么是七牛云，自行百度。我只讲几点重要的
• 图片压缩、裁剪，人脸识别，CDN加速，不占后端资源

代码

为什么和csdn大部分不同？他们是直接一个ajaxj就请求了，没有配置可言
这是官方前端上传七牛详细文档

• 首先是声明了好几个变量，都是配置来的。最后qinniu.upload（）上传

• key是上传后的文件名，为什么有个/，是命名规范吧，也是为了防止命名重复

• filetail是获取的文件格式（后缀）

• 为什么没有请求地址？ 因为我们是根据自己的后端返回的token判断的。有一个配置是否自动分析上传区域，因为存储区域就五个。

• 其次是回显地址，他会返回给你key，就是你命名的文件名，有key==成功。
  回显地址=“你在七牛上设置好的外链地址”+key
  比如你在七牛上设置了返回https://baidu.com/。那么就是https://baidu.com/文件名

• 为什么有个_this=this，因为发现this用不了，原理不大懂，踩坑了

• import * as qiniu from "qiniu-js"; 记得npm下这个，开始用七牛的人了这个应该会

    async uploadFile(file) {
    
    
      		  let filetail = file.file.type.split('/')[1]
			  let _this = this;
              let newfile = file.file;
              let observer = {
    
    
                  next(res) {
    
    },
                  error(err) {
    
    
                      console.log(err.message);
                      _this.$message.error('图片上传失败')
                  },
                  complete(result) {
    
    
                      if (result.key) {
    
    
                      let url="https://xxxx.com/" + result.key
                      _this.imglist.push({
    
    "url":url})
                      if(_this.imglist.length==_this.fileList.length)
                      _this.imgsubmit()
                      }
                  }
              },
              key = `remarkimg/${
    
    new Date().getTime()}.${
    
    filetail}`,
              config = {
    
    
                  useCdnDomain: true, //使用cdn
                  region: null  //上传区域,当为 null 或 undefined 时，自动分析上传域名区域。
              },
              putExtra = {
    
    
                  fname: "",  //文件原始名称
                  params: {
    
    },
                  mimeType: null  //指定所传的文件类型
              },
              observable = qiniu.upload(newfile, key, this.token, putExtra, config);
              let subscription =observable.subscribe(observer);
    },