大文件上传前端处理

前端处理

使用 sprk-md5.js plupload.js 来完成上传的功能

# 引入 下面 Uploader.vue 的封装组件
<uploader
	// 配置外部的点击以获取dom节点对象
	browse_button="browse_button"
	// 配置上传地址
	:url="server_config.url+'/BigFile/'"
	// 分片上传每次上传的大小
	chunk_size="2MB"
	// 禁止选择重复的文件
	:filters="{prevent_duplicates:true}"
	// 添加文件以及其他有关参数信息r
/>
	
watch: {
	// 监听变化添加 tableData 显示列表
  files: {
	handler() {
	  this.tableData = [];
	  this.files.forEach((e) => {
		this.tableData.push({
		  name: e.name,
		  size: e.size,
		  status: e.status,
		  id: e.id,
		  percent: e.percent
		});
	  });
	},
	deep: true
  }
},


// 获取当前实例对象
inputUploader(up) {
	debugger;
	console.log(up);
	this.up = up;
	this.files = up.files;
},

// uploader为当前的plupload实例对象，files为一个数组，里面的元素为本次添加到上传队列里的文件对象
filesAdded(up, files) {
	files.forEach((f) => {
	  f.status = -1;
	  FileMd5(f.getNative(), (e, md5) => {
		f["md5"] = md5;
		f.status = 1;
	  });
	});
},
deleteFile(id) {
	debugger;
	console.log(this.up);
	let file = this.up.getFile(id);
	this.up.removeFile(file);
},
// 添加对应信息
beforeUpload(up, file) {
	up.setOption("multipart_params", {"size":file.size,"md5":file.md5});
  }
}

file-md5.js

'use strict';

import '../plugins/js-spark-md5.js'

export default function (file, callback) {
  var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
    file = file,
    chunkSize = 2097152,                             // Read in chunks of 2MB
    chunks = Math.ceil(file.size / chunkSize),
    currentChunk = 0,
    spark = new SparkMD5.ArrayBuffer(),
    fileReader = new FileReader();
	// 分块处理
  fileReader.onload = function (e) {
    console.log('read chunk nr', currentChunk + 1, 'of', chunks);
    spark.append(e.target.result);                   // Append array buffer
    currentChunk++;

    if (currentChunk < chunks) {
      loadNext();
    } else {
      callback(null, spark.end());
      console.log('finished loading');
    }
  };

  fileReader.onerror = function () {
    callback('oops, something went wrong.');
  };
	// 分块数据存储
  function loadNext() {
    var start = currentChunk * chunkSize,
      end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

    fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
  }

  loadNext();
};

file-url.js

export default function (file, callback) {
  if (!file || !/image\//.test(file.type)) return;
  let fileReader = new FileReader();
  fileReader.onload = function () {
    callback(null,fileReader.result);
  };
  fileReader.onerror = function () {
    callback('oops, something went wrong.');
  };
  fileReader.readAsDataURL(file);
}

Uploader.vue
plupload封装为成一个vue组件

<template></template>
<script>
  import plupload from 'plupload/js/plupload.full.min.js'
  export default {
    name: "Uploader",
    props: {
      browse_button: {
        type: String
      },
      container: {
        type: String
      },
      url: {
        type: String
      },
      filters: {
        type: Object
      },
      headers: {
        type: Object
      },
      multipart_params: {
        type: Object
      },
      resize: {
        type: Object
      },
      drop_element: {
        type: String
      },
      required_features: {
        type: String
      },
      runtimes: {
        type: String,
        default() {
          return "html5,flash,silverlight,html4";
        }
      },
      chunk_size: {
        type: String,
        default() {
          return "0";
        }
      },
      multipart: {
        type: Boolean,
        default(){
          return true;
        }
      },
      max_retries: {
        type: Number,
        default() {
          return 0;
        }
      },
      multi_selection: {
        type: Boolean,
        default() {
          return true;
        }
      },
      unique_names: {
        type: Boolean,
        default() {
          return false;
        }
      },
      file_data_name: {
        type: String,
        default() {
          return "file";
        }
      },
      flash_swf_url: {
        type: String,
        default() {
          return 'plupload/js/Moxie.swf';
        }
      },
      silverlight_xap_url: {
        type: String,
        default() {
          return "plupload/js/Moxie.xap";
        }
      },
      Init: {
        type: Function
      },
      PostInit: {
        type: Function
      },
      Browse: {
        type: Function
      },
      OptionChanged: {
        type: Function
      },
      Refresh: {
        type: Function
      },
      StateChanged: {
        type: Function
      },
      UploadFile: {
        type: Function
      },
      BeforeUpload: {
        type: Function
      },
      QueueChanged: {
        type: Function
      },
      UploadProgress: {
        type: Function
      },
      FilesRemoved: {
        type: Function
      },
      FileFiltered: {
        type: Function
      },
      FilesAdded: {
        type: Function
      },
      FileUploaded: {
        type: Function
      },
      ChunkUploaded: {
        type: Function
      },
      UploadComplete: {
        type: Function
      },
      Error: {
        type: Function
      },
      Destroy: {
        type: Function
      }
    },
    data() {
      return {
        up: {},
      }
    },
    watch: {
      up(val) {
        this.$emit('inputUploader', val);
      }
    },
    methods: {
      init() {
        let that = this;
        const preInitMethod = {
          Init(up, info) {
            if (that.Init != null) {
              that.Init(up, info);
            }
          },
          UploadFile(up, file) {
            if (that.UploadFile != null) {
              that.UploadFile(up, file);
            }
          }
        };
        const initMethod = {
          PostInit() {
            if (that.PostInit != null) {
              that.PostInit();
            }
          },
          Browse(up) {
            if (that.Browse != null) {
              that.Browse(up);
            }
          },
          OptionChanged(up, name, value, oldValue) {
            if (that.OptionChanged != null) {
              that.OptionChanged(up, name, value, oldValue);
            }
          },
          Refresh(up) {
            if (that.Refresh != null) {
              that.Refresh(up);
            }
          },
          StateChanged(up) {
            if (that.StateChanged != null) {
              that.StateChanged(up);
            }
          },
          BeforeUpload(up, file) {
            if (that.BeforeUpload != null) {
              that.BeforeUpload(up, file);
            }
          },
          QueueChanged(up) {
            if (that.QueueChanged != null) {
              that.QueueChanged(up);
            }
          },
          UploadProgress(up, file) {
            if (that.UploadProgress != null) {
              that.UploadProgress(up, file);
            }
          },
          FilesRemoved(up, files) {
            if (that.FilesRemoved != null) {
              that.FilesRemoved(up, files);
            }
          },
          FileFiltered(up, file) {
            if (that.FileFiltered != null) {
              that.FileFiltered(up, file);
            }
          }, 
          FilesAdded(up, files) {
            if (that.FilesAdded != null) {
              that.FilesAdded(up, files);
            }
          },
          FileUploaded(up, file, info) {
            if (that.FileUploaded != null) {
              that.FileUploaded(up, file, info);
            }
          },
          ChunkUploaded(up, file, info) {
            if (that.ChunkUploaded != null) {
              that.ChunkUploaded(up, file, info);
            }
          },
          UploadComplete(up, files) {
            if (that.UploadComplete != null) {
              that.UploadComplete(up, files);
            }
          },
          Error(up, args) {
            if (that.Error != null) {
              that.Error(up, args);
            }
          },
          Destroy(up) {
            if (that.Destroy != null) {
              that.Destroy(up);
            }
          }
        };
        let prop = {
          runtimes: this.runtimes,
          browse_button: this.browse_button,
          container: this.container,
          url: this.url,
          chunk_size: this.chunk_size,
          headers: this.headers,
          multipart: this.multipart,
          max_retries: this.max_retries,
          multi_selection: this.multi_selection,
          unique_names: this.unique_names,
          file_data_name: this.file_data_name,
          flash_swf_url: this.flash_swf_url,
          silverlight_xap_url: this.silverlight_xap_url,
          preinit: preInitMethod,
          init: initMethod
        };
        if (this.filters != null) {
          prop["filters"] = this.filters;
        }
        if (this.multipart_params != null) {
          prop["multipart_params"] = this.multipart_params;
        }
        if (this.resize != null) {
          prop["resize"] = this.resize;
        }
        if (this.drop_element != null) {
          prop["drop_element"] = this.drop_element;
        }
        if (this.required_features != null) {
          prop["required_features"] = this.required_features;
        }
        let uploader = new plupload.Uploader(prop);
        uploader.init();
        this.up = uploader;
      }
    },
    mounted() {
      console.log("uploader");
      this.init();
    }
  }
</script>