文件上传预览及使用七牛云上传

在先前一个项目里,碰到有一个图片上传预览的功能以及使用七牛云进行上传,抽空整理出来。

文件上传之前，需要包含预览/检测这些基本功能

对于本地文件，我们使用H5的 <input type='file' @change="checkFile"/> 进行选择上传 ，并能够获取到文件的files 对象,上面有name、type、size等属性，可以通过change事件监听文件变化，实时获取最新的files对象

本地预览

先获取本地数据URl地址

在window.url上有一个createObjectURL的方法，能解析上面files对象，返回一个二进制的src
代码如下

function createObjectURL(blob) { 
    if (window.URL) { 
        return window.URL.createObjectURL(blob); 
    } else if (window.webkitURL) { 
        return window.webkitURL.createObjectURL(blob); 
    } else { 
    return null; 
} 
} 

文件检测

在上传前,要对文件类型和大小的检测，也是通过获取到的files对象进行判断

function checkFile(files) { 
    //获取文件 
    const file = files[0]; 
    //文件为空判断 
    if (file === null || file === undefined) { 
        alert("请选择您要上传的文件！");  
        return false; 
    } 
    //计算文件大小 
    let size = Math.floor(file.size/1024); 
    if (size > 10000) { 
        alert("上传文件不得超过10M!"); 
        return false; 
    }; 
    //检测文件类型 
    if(file.type.indexOf('image') === -1 && file.type.indexOf('video') === -1) { 
        alert("请选择图片文件或视频文件！"); 
        return false; 
    }
  if(file.type.indexOf('jpeg') === -1 && file.type.indexOf('mp4') === -1){
      alert("图片目前支持jpg格式，视频支持mp4格式");
      return false;
  }
  // 插入图片或视频
  $("body").innerHTML = file.type.indexOf('image') === -1 
    ?"<video src=\""+createObjectURL(file)+"\"/>"
    :"<img src=\""+createObjectURL(file)+"\"/>"
  return true;
}; 

最后我们通过七牛云进行托管文件
通过sctipt标签引入该文件，会在全局生成名为 qiniu 的对象,因为一些原因，项目中用1.x版本的七牛sdk https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/1.8/qiniu.min.js

axios.get(baseurl+'/token').then(function(re){// 获取token和key
      const {token,keys} = {re.uptoken,re.save_key};
      const uploader = Qiniu.uploader({
        runtimes: 'html5,html4',    //上传模式,依次退化
        browse_button: 'btnSelect',       //上传选择的点选按钮，**必需**
        uptoken: token,
        // uptoken_url: 'http://192.168.1.110:3000/upload/uptoken_ad',            //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
        // uptoken : '', //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
        unique_names: false, // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
        save_key: false,   // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK会忽略对key的处理
        domain: 'http://cdn.xxxx.com',   //bucket 域名，下载资源时用到，**必需**
        get_new_uptoken: false,  //设置上传文件的时候是否每次都重新获取新的token
        container: 'img',           //上传区域DOM ID，默认是browser_button的父元素，
        max_file_size: '100mb',           //最大文件体积限制
        flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
        max_retries: 3,                   //上传失败最大重试次数
        dragdrop: true,                   //开启可拖曳上传
        drop_element: 'img',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
        chunk_size: '5mb',                //分块上传时，每片的体积
        auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
        init: {
            'FilesAdded': function(up, files) {
                plupload.each(files, function(file) {
                    // 文件添加进队列后,处理相关的事情
                    console.log(1);
                });
            },
            'BeforeUpload': function(up, file) {
                   // 每个文件上传前,处理相关的事情
                   console.log(2);
            },
            'UploadProgress': function(up, file) {
                   // 每个文件上传时,处理相关的事情
                   console.log(3);
            },
            'FileUploaded': function(up, file, info) {
                   var domain = up.getOption('domain');
                   var res = JSON.parse(info);
                   console.log(res);
                   var sourceLink = domain + '/' + res.key; //获取上传成功后的文件的Url
                   console.log(sourceLink);
            },
            'Error': function(up, err, errTip) {
                   //上传出错时,处理相关的事情
                   console.log(err);
                   console.log(errTip);
            },
            'UploadComplete': function() {
                   //队列文件处理完毕后,处理相关的事情
            },
            'Key': function(up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效

                var key = keys;
                // do something with key here
                return key
            }
        }
      });
    })