2020-11-30

七牛分片上传

今天说下七牛云的分片上传

项目中我们自己项目如果遇到大图片视频，等需要上传的项目会发现如果本地上传到自己服务器。
第一会发现上传的视频过大有可能会出现响应终止的情况，第二会发现自己服务器上传了太多的媒体素材不好管理，第三图片还得自己手动压缩和视频截取封面图反正麻烦的一批
七牛云的分片上传其实对前端的友好程度也不是多高，但是他便宜啊。接下来就看下七牛分片上传

七牛上传有点坑爹他没有自己的上传代码，他使用的是Plupload上传组件就是说用七牛上传最好使用Plupload进行数据流上传
七牛云上传使用方式有两种一种是用<script>引入一个是使用vue中npm安装js包进行

七牛云上传进行script引入模式

无需npm install安装

1 2	<script src="https://cdn.staticfile.org/plupload/2.1.9/plupload.full.min.js"></script> <script src="http://www.lidaolin.com/demo/qiniu.js"></script>

引入后就可以在vue文件中使用了这种使用方式比较简单点
参考vue+七牛云上传视频文件

toDecimal (size) {
  size = size / 1024 / 1024
  var f = parseFloat(size)
  if (isNaN(f)) {
    return
  }
  f = Math.round(size * 10) / 10
  var s = f.toString()
  var rs = s.indexOf('.')
  if (rs < 0) {
    rs = s.length
    s += '.'
  }
  while (s.length <= rs + 1) {
    s += '0'
  }
  return s
},
initUploader () {
//   let plupload = window.plupload
//   let Qiniu = global.Qiniu
  let _this = this
  // domain为七牛空间对应的域名，选择某个空间后，可通过 空间设置->基本设置->域名设置 查看获取
//   let isIphone5 = this.phoneType === '5'
  // uploader为一个plupload对象，继承了所有plupload的方法
  this.uploader = Qiniu.uploader({
    runtimes: 'html5,flash,html4', // 上传模式，依次退化
    browse_button: 'pickfiles', // 上传选择的点选按钮，必需
    uptoken: this.token, // uptoken是上传凭证，由其他程序生成，后台获取后存在data里
    // uptoken_url: "http://api.lidaolin.com/upload/getuptoken", //后端获取token的url
    get_new_uptoken: true, // 设置上传文件的时候是否每次都重新获取新的uptoken项目不大建议关闭，没啥用
    bucket_name: 'common-web', // 空间名
    unique_names: false, // 默认false，key为文件名。若开启该选项，JS-SDK会为每个文件自动生成key（文件名）
    save_key: false, // 默认false。若在服务端生成uptoken的上传策略中指定了sava_key，则开启，SDK在前端将不对key进行任何处理
    domain: 'https://xxx.com', // bucket domain eg:http://qiniu-plupload.qiniudn.com/  //自己在七牛的的域名
    container: 'video_container', // 上传区域DOM ID，默认是browser_button的父元素
    max_file_size: '10mb', // 最大文件体积限制
    dragdrop: false, // 开启可拖曳上传
    drop_element: 'video_container', // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
    chunk_size: '4mb', // 分块上传时，每块的体积
    max_retries: 3, // 上传失败最大重试次数
    auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
    multi_selection: !isIphone5,
    init: {
      Key: function (up, files) {
        return _this.filename
      },
      FilesAdded: function (up, files) {
        plupload.each(files, function (file) {
          // 文件添加进队列后，处理相关的事情
          console.log('FilesAdded')
          _this.fileSize = _this.toDecimal(file.size)
        })
      },
      BeforeUpload: function (up, file) {
        console.log('BeforeUpload')
      },
      ChunkUploaded: function (up, file, info) {
        console.log('ChunkUploaded')
      },
      UploadProgress: function (up, file) {
        // 每个文件上传时，处理相关的事情
        _this.filePercent = parseInt(file.percent)
        _this.fileLoaded = plupload.formatSize(file.loaded).toUpperCase()
        _this.fileSpeed = plupload.formatSize(file.speed).toUpperCase()
      },
      FileUploaded: function (up, file, info) {
        console.log('FileUploaded')
        let response = JSON.parse(info.response)
        _this.hash = response.hash
        _this.resFileName = response.key
        _this.coverPic = 'https://xxx.com/' + response.key + '?vframe/png/offset/7/w/480'
      }，
      Error: function (up, err, errTip) {
        // 上传出错时，处理相关的事情
        _this.$toast('Error =')
        _this.$toast(err)
        _this.$toast('errTip =')
        _this.$toast(errTip)
      },
      UploadComplete: function () {
        // 队列文件处理完毕后，处理相关的事情
        _this.$toast('UploadComplete')
      }
    }
  })
},

另外种方法就比较麻烦先下载
npm install plupload -s
七牛云上传主要是用的plupload上传机制下面的当我没说只是有这个理念没试验过，我现在没空
参考文献 vue+element+plupload上传图片组件 vue-plupload-aj 在vue中使用plupload上传图片到七牛(着重解决moxie is not defined问题) 前端上传组件Plupload使用指南前端上传组件Plupload使用指南
反正我现在不想弄了如果想弄自己看看吧，结果发现贼麻烦没遇到需求的时候我不会弄的

<template>
  <div>
  <div class="box-img"  v-if="fileType===1">
    <!--<a id="selectfiles" href="javascript:void(0);" class='btn' onchange='console.log(888)'>选择文件</a>-->
    <!--<a id="postfiles" href="javascript:void(0);" class='btn'>开始上传</a>-->
    <div class="box el-icon-circle-plus" :id="'selectfiles'+index"  @dblclick.native="alert(index)">
      <div class="img_del el-icon-circle-close" v-if="Url!==''" @click.stop="del(index)"></div>
      <img :src="Url" alt="" v-if="Url!==null">
      <div class="jindu_box" v-if="jintu">
        <el-progress type="circle" :percentage="percentage" color="#67C23A" v-if="percentage!==100"></el-progress>
        <el-progress type="circle" :percentage="percentage" status="success" v-if="percentage===100"></el-progress>
      </div>
    </div>
    <div class="img_name"  v-if="fileType===1">
      {{name}}
    </div>
  </div>
    <div class="file-box" v-if="fileType!==1">
      <div>
        {{Url===''?'请选择文件':pushName}}
       <div v-if="jintu">
        <el-progress :percentage="percentage" color="#67C23A" v-if="percentage!==100"></el-progress>
        <el-progress :percentage="percentage" status="success" v-if="percentage===100"></el-progress>
      </div>
      </div>
      <el-button type="primary" :id="'selectfiles'+index">
        {{Url===''?'选择文件':'重新选择'}}
      </el-button>
      <el-button type="primary" v-if="Url!==''" @click="inspect(Url)">
        检查
      </el-button>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/utils/crypto1/crypto/crypto.js'
  import '@/utils/crypto1/hmac/hmac.js'
  import '@/utils/crypto1/sha1/sha1.js'
  import Base64 from '@/utils/base64.js'
  import plupload from 'plupload'
  // sougegeshe // sougematch
  let accessid = 'LTAIShfs0pmAbRkb'
  let accesskey = 'qlx4Fp0yLI8fbA9zQmVIcPsCCdGBBh'
  let host = 'http://sougematch.oss-cn-beijing.aliyuncs.com'
  let bucket = 'image'
 
  let g_dirname = ''
  let g_object_name = ''
  let g_object_name_type = ''
  var timestamp
  let now = timestamp = Date.parse(new Date()) / 1000
  let pos = ''
  let suffix = ''
 
  var policyText = {
    'expiration': '2020-01-01T12:00:00.000Z', // 设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
    'conditions': [
      ['content-length-range', 0, 1048576000] // 设置上传文件的大小限制
    ]
  }
 
  var policyBase64 = Base64.encode(JSON.stringify(policyText))
  let message = policyBase64
  var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, {asBytes: true})
  var signature = Crypto.util.bytesToBase64(bytes)
 
  // 选择上传名字是本地文件名字还是随机文件名字
  function check_object_radio () {
    g_object_name_type = 'random_name'
  }
 
  // 默认是上传到根目录
  function get_dirname () {
    g_dirname = 'image/'
  }
 
  // 获得随机的字符串
  function random_string (len) {
    len = len || 32
    var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
    var maxPos = chars.length
    var pwd = ''
    for (var i = 0; i < len; i++) {
      pwd += chars.charAt(Math.floor(Math.random() * maxPos))
    }
    return pwd
  }
 
  // 获取文件后缀
  function get_suffix (filename) {
    pos = filename.lastIndexOf('.')
    suffix = ''
    if (pos !== -1) {
      suffix = filename.substring(pos)
    }
    return suffix
  }
 
  // 获取文件名字
  function calculate_object_name (filename) {
    if (g_object_name_type === 'local_name') {
      g_object_name += filename
    } else if (g_object_name_type === 'random_name') {
      suffix = get_suffix(filename)
      g_object_name = random_string(10) + new Date().getTime() + suffix
    }
    return ''
  }
 
  function get_uploaded_object_name (filename) {
    if (g_object_name_type === 'local_name') {
      var tmp_name = g_object_name
      tmp_name = tmp_name.replace(filename, filename)
      return tmp_name
    } else if (g_object_name_type === 'random_name') {
      return g_object_name
    }
  }
 
  // 设置上传参数
  function set_upload_param (up, filename, ret) {
    // g_object_name = g_dirname
    if (filename !== '') {
      suffix = get_suffix(filename)
      calculate_object_name(filename)
    }
    let new_multipart_params = {
      'Filename': g_dirname + g_object_name,
      'key': g_dirname + g_object_name,
      'policy': policyBase64,
      'OSSAccessKeyId': accessid,
      'success_action_status': '200', // 让服务端返回200,不然，默认会返回204
      'signature': signature
    }
    // console.log(g_object_name)
    up.setOption({
      'url': host,
      'multipart_params': new_multipart_params
    })
    up.start()
  }
  export default {
    name: 'ImgUpload',
    data () {
      return {
        // Url: null,
        percentage: 0,
        jintu: false,
        pushName:''
      }
    },
    props: {
      name:{
        type: String,
        required: true
      },
      fileType:{
        type: Number,
        required: true
      },
      Url:String,
      type: {
        type: Number,
        default:1
      },
      index: {
        type: Number,
        default:0
      },
      add_img: Function,
      del_img:Function
    },
    methods: {
      del (index) {
        // alert(index)
        this.del_img(index)
      },
      inspect (url) {
        window.open(url);
      }
    },
    mounted () {
      var that = this
      var uploader = new plupload.Uploader({
        runtimes: 'html5,flash,silverlight,html4',
        browse_button: 'selectfiles'+that.index,
        multi_selection: false,
        // container: document.getElementById('container'),
        flash_swf_url: './../assets/plupload-2.1.2/js/Moxie.swf',
        silverlight_xap_url: './../assets/plupload-2.1.2/js/Moxie.xap',
        url: host,
 
        init: {
          PostInit: function () {},
          QueueChanged: function (up) { // 数组变化是发生
          },
          FileFiltered: function (up, files) {
            var fileSize = (Math.round(files.size * 100 / (1024 * 1024)) / 100).toString() // MB
            if (fileSize > 10) {
              uploader.removeFile(files)
              that.$message.error('文件不能大于10M')
            }
          },
          FilesAdded: function (up, files) {
 
            set_upload_param(uploader, '', false)
          },
 
          BeforeUpload: function (up, file) {
            check_object_radio()
            get_dirname()
            set_upload_param(up, file.name, true)
          },
 
          UploadProgress: function (up, file) {
            // console.log(file.percent, 123123) // 进度条设置
            that.jintu = true
            that.percentage = file.percent
          },
 
          FileUploaded: function (up, file, info) {
            if (info.status === 200) {
              that.$message({
                message: '上传成功',
                type: 'success'
              })
              var Url = host + '/' + g_dirname + get_uploaded_object_name(file.name)
              that.pushName = file.name
              // console.log(Url)
              that.add_img(that.type, Url, that.index,that.fileType)
              that.jintu = false
              that.percentage = 0
            } else {
              that.jintu = false
              that.percentage = 0
            }
          },
 
          Error: function (up, err) {
 
          }
        }
      })
      uploader.init()
    }
  }
</script>
<style type="text/css">
  .uploadImg-main {
    width: 100px;
    height: 130px;
    text-align: center;
    float: left;
    font-size: 14px;
    color: #C0C4CC;
    line-height: 30px;
    margin-right: 54px;
  }
 
  .uploadImg-main .uploadImg {
    width: 100px;
    height: 100px;
    position: relative;
    font-size: 12px;
    line-height: 20px;
    border: 1px dashed #C0C4CC;
    cursor: pointer;
  }
 
  .uploadImg-main .uploadImg i {
    font-size: 40px;
    line-height: 70px
  }
 
  .uploadImg-main .uploadImg input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    filter: alpha(opacity:0);
    opacity: 0;
    cursor: pointer;
  }
 
  .uploadImg-main .uploadImg img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
 
  .box {
    width: 130px;
    height: 130px;
    background: #F9F9F9;
    color: #D8D8D8;
    text-align: center;
    line-height: 130px;
    font-size: 28px;
    border: 1px solid #D8D8D8;
  }
 
  .box img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .box-img{
    width: 130px;
  }
  .img_name{
    width: 100%;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    text-align: center;
    margin-top: 15px;
  }
  .jindu_box{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .img_del{
    position: absolute;
    width: 20px;
    height: 20px;
    color: #989898;
    top: 5px;
    right: 5px;
    z-index: 111;
    font-size: 20px;
  }
  .file-box{
    width: 100%;
  }
</style>