Heim  >  Artikel  >  Web-Frontend  >  Entwicklungsbeispiel für die Webuploader-Komponente zum Hochladen von Dateien

Entwicklungsbeispiel für die Webuploader-Komponente zum Hochladen von Dateien

小云云
小云云Original
2018-02-02 13:28:243303Durchsuche

In einem kürzlich durchgeführten Projekt musste ich den Webuploader von Baidu verwenden, um große Dateien in Teilen hochzuladen und eine Verbindung zu den Back-End-Fastdfs herzustellen, also begann ich, dieses kleine Plug-in für den Datei-Upload zu schreiben. Die Schritte sind sehr einfach, aber da Es gibt auch viele Fallstricke, die ich erraten kann. Er stellt hauptsächlich die Entwicklung der Vue-Webuploader-Datei-Upload-Komponente vor. Jetzt werde ich es mit Ihnen teilen und Ihnen eine Referenz geben .

Die Details lauten wie folgt:

1. Kapselungskomponenten

Einführung von webuploader.js und Uploader.swf, bereitgestellt von Baidu

Der CSS-Stil wird direkt in die Komponente geschrieben


<template>
 <p>
  <p id="list" class="uploader-list"></p>
  <p id="wrapper">
   <p class="uploader-container">
    <p :id="id" limitSize="1" :ext="ext"></p>
    <el-button style="margin-bottom:10px;float:left;" size="small" :loading="uploadLoading" type="success" @click="start">上传到服务器</el-button>
    <el-button style="margin-left: 20px;margin-bottom:10px;float:left;" :disabled="stopBtn" size="small" type="danger" @click="stop">暂停上传</el-button>
   </p>
  </p>
  <p class="el-upload__tip">{{tip}}</p>
  <p class="file-list">
   <ul class="el-upload-list el-upload-list--text">
    <li v-for="file in fileList" :class="[&#39;el-upload-list__item&#39;, &#39;is-&#39; + file.status]" :key="file">
     <a class="el-upload-list__item-name">
      <i class="el-icon-document"></i>{{file.name}}
     </a>
     <label class="el-upload-list__item-status-label">
      <i :class="{&#39;el-icon-upload-success&#39;: true,&#39;el-icon-circle-check&#39;: listType === &#39;text&#39;,
     &#39;el-icon-check&#39;: [&#39;picture-card&#39;, &#39;picture&#39;].indexOf(listType) > -1}"></i>
     </label>
     <i class="el-icon-close" @click="removeFile(file)"></i>
     <el-progress
      v-if="file.status === &#39;uploading&#39;"
      :type="listType === &#39;picture-card&#39; ? &#39;circle&#39; : &#39;line&#39;"
      :stroke-width="listType === &#39;picture-card&#39; ? 6 : 2"
      :percentage="file.percentage">
     </el-progress>
    </li>
   </ul>
  </p>
 </p>
</template>
<script>
 import &#39;../js/jquery.js&#39;
 import &#39;../js/webuploader.js&#39;
 import { Base64 } from &#39;js-base64&#39;
 import CryptoJS from &#39;crypto-js&#39;;

 export default{
  name: &#39;fileUpload&#39;,
  props: {
   id: {
    type: String,
    default: function(){
     return "filePicker";
    }
   },
   //上传提示
   tip: {
    type: String,
    default: function(){
     return "";
    }
   },
   //文件后缀名限制
   ext: {
    type: String,
    default: function(){
     return "jpg,jpeg,png,pdf,mp4,avi.mp3";
    }
   },
   //分片大小设置
   chunkSize: {
    type: Number,
    default: function(){
     return 2097152;
    }
   },
   //分片上传重试次数
   chunkRetry: {
    type: Number,
    default: function(){
     return 1;
    }
   },
   //是否自动上传
   auto: {
    type: Boolean,
    default: function(){
     return false;
    }
   },
   //上传文件大小限制
   sizeLimit: {
    type: Number,
    default: function(){
     return 209715200;
    }
   },
   //上传文件数量限制
   countLimit: {
    type: Number,
    default: function(){
     return 5;
    }
   }
  },
  data(){
   return{
    appId: AppConfig.appId,
    securityKey: AppConfig.securityKey,
    checkUrl: AppConfig.checkUrl,
    uploadUrl: AppConfig.uploadUrl,
    mergeUrl: AppConfig.mergeUrl,
    previewName: &#39;选择文件&#39;,
    wul_fileMd5: &#39;&#39;,
    wul_size: 0,
    wul_fileName: &#39;&#39;,
    wul_chunk: 0,
    wul_uploader: &#39;&#39;,
    fileList: [],
    listType: &#39;text&#39;,
    percentage: 0,
    fileObject: {
     uid: &#39;&#39;,
     name: &#39;&#39;,
     ext: &#39;&#39;,
     type: &#39;&#39;,
     status: &#39;&#39;,
     percentage: 0,
     url: &#39;&#39;
    },
    uploadLoading: false,
    stopBtn: true
   }
  },
  methods: {
   /**
    * 获取当前上传列表中的文件
    * @returns {Array|*}
    */
   getFileList: function(){
    return this.fileList;
   },
   //绑定事件
   wul_init: function() {
    //提示只能选择一个文件
    this.wul_uploader.on(&#39;filesQueued&#39;, function (files) {
     if (files.length > 1) {
      this.$message({
       message: &#39;请选择一张图片&#39;,
       type: &#39;error&#39;
      });
      for (var i = 0; i < files.length; i++) {
       this.wul_uploader.cancelFile(files[i]);
      }
      this.wul_uploader.reset();
      this.wul_fileMd5 = "";
      this.wul_size = 0;
      this.wul_fileName = "";
      this.wul_chunk = 0;  //当前切片数
     }else{
      if( this.fileList.length == this.countLimit ){
       this.$message({
        message: &#39;已经达到上传文件限制数量&#39;,
        type: &#39;error&#39;
       });
      }else{
       //此时往需要上传的文件列表中添加文件
       let file = {
        uid: Date.now() + this.tempIndex++,
        name: files[0].name,
        type: files[0].type,
        ext: files[0].ext,
        status: "ready",
        percentage: 0
       }
       this.fileObject = file;
       this.fileList.push(this.fileObject);
      }
     }
    }.bind(this));

    //文件校验格式和大小
    this.wul_uploader.on(&#39;error&#39;, function (type) {
      debugger
     if (type == &#39;Q_EXCEED_SIZE_LIMIT&#39;) {
      this.$message({
       message: &#39;文件超过指定大小&#39;,
       type: &#39;error&#39;
      });
     }
     if (type == &#39;Q_TYPE_DENIED&#39;) {
      this.$message({
       message: &#39;文件格式错误,请选择文件&#39;,
       type: &#39;error&#39;
      });
     }
     if (type == &#39;F_EXCEED_SIZE&#39;) {
      this.$message({
       message: "文件超过" + this.sizeLimit / 1024 / 1024 + "M",
       type: &#39;error&#39;
      });
     }
    }.bind(this));

    //上传进度
    this.wul_uploader.on(&#39;uploadProgress&#39;, function (file, percentage) {
     this.percentage = percentage * 100;
     this.fileObject.status = "uploading";
     this.fileObject.percentage = this.percentage;
     console.log(this.fileObject.percentage);
    }.bind(this));

    //每次切片上传完成之后的判断
    this.wul_uploader.on(&#39;uploadAccept&#39;, function (object, ret) {
     if (ret.responseCode != 0) {
      this.wul_uploader.cancelFile(this.wul_uploader.getFiles()[0].id);
     }
    });

    this.wul_uploader.on(&#39;uploadBeforeSend&#39;, function(object, data, headers) {
     console.log(data);
    });
   },

   option: function(key, val) {
    this.wul_uploader.option(key, val);
    var options = this.wul_uploader.options;
    this.wul_uploader.destroy();  //注销uploader
    this.wul_uploader = WebUploader.create(options);
    this.wul_init();
   },
   start: function(){
    if(this.wul_uploader.getFiles()[0] != null) {
     this.wul_uploader.upload(this.wul_uploader.getFiles()[0].id);
     this.uploadLoading = true;
     this.stopBtn = false;
    } else {
     this.$message({
      message: "请选择上传文件",
      type: &#39;error&#39;
     });
    }
   },
   stop: function(){
    this.wul_uploader.cancelFile(this.wul_uploader.getFiles()[0].id);
   },
   removeFile: function(file){
    this.fileList.splice(this.fileList.indexOf(file), 1);
   },
   change: function(){
    this.option(&#39;accept&#39;, {
     title: &#39;Images&#39;,
     extensions: &#39;gif,jpg,jpeg,bmp,png&#39;
    });
   }
  },
  mounted(){
   WebUploader.Uploader.register({
    "before-send-file": "beforeSendFile",
    "before-send": "beforeSend",
    "after-send-file": "afterSendFile",
   }, {
    beforeSendFile: function (file) {
     var deferred = WebUploader.Deferred();
     this.wul_uploader.md5File(file).then(function (val) {
      this.wul_fileMd5 = val;
      this.wul_size = file.size;
      this.wul_fileName = file.name;
      var timestamp = Date.parse(new Date()) / 1000;
      var signParam = "{chunkSize=" + this.chunkSize + ", fileMd5=" + this.wul_fileMd5 + ", size=" + this.wul_size + ", timestamp=" + timestamp + "}";
      var sign = Base64.encode(CryptoJS.HmacSHA1(signParam, this.securityKey));
      // 获取断点续传位置
      jQuery.ajax({
       type: "POST",
       // 测试
       url: this.checkUrl,
       data: {
        // 文件大小
        size: this.wul_size,
        // 文件唯一标记
        fileMd5: this.wul_fileMd5,
        // 切片大小
        chunkSize: this.chunkSize,
        // 签名
        sign: sign,
        // 应用分配id
        appId: this.appId,
        // 当前时间戳
        timestamp: timestamp

       },
       dataType: "json",
       // 上传失败
       error: function (XMLHttpRequest, textStatus, errorThrown) {
        this.$message({
         message: "上传失败...",
         type: &#39;error&#39;
        });
        this.uploadLoading = false;
        this.stopBtn = true;
       }.bind(this),
       success: function (response) {
        if (response.responseCode == 0) { // 切片获取成功
         this.wul_chunk = response.chunk;
         deferred.resolve();
        } else { // 切片获取失败,请求成功
         this.wul_uploader.cancelFile(file);  //取消文件上传
         this.$message({
          message: "切片检查失败,请联系管理员",
          type: &#39;error&#39;
         });
         deferred.resolve();
         this.uploadLoading = false;
         this.stopBtn = true;
        }
       }.bind(this)
      });
      return deferred.promise();
     }.bind(this));
     return deferred.promise();
    }.bind(this),
    beforeSend: function (block) {
     var deferred = WebUploader.Deferred();
     if (block.chunk < this.wul_chunk) {
      return deferred.reject();
     }
     this.wul_uploader.md5File(block.blob).then(function (chunkMd5) {
      var timestamp = Date.parse(new Date()) / 1000;
      var signParam = &#39;{chunk=&#39; + block.chunk + &#39;, chunkMd5=&#39; + chunkMd5 + &#39;, chunkSize=&#39; + this.chunkSize + &#39;, fileMd5=&#39; + this.wul_fileMd5 + &#39;, size=&#39; + this.wul_size + &#39;, timestamp=&#39; + timestamp + &#39;}&#39;;
      var signTemp = CryptoJS.HmacSHA1(signParam, this.securityKey);
      var sign = Base64.encode(signTemp);  //获取sign值
      this.wul_uploader.options.formData = {
       &#39;timestamp&#39;: timestamp,
       &#39;appId&#39;: this.appId,
       &#39;chunk&#39;: block.chunk,
       &#39;chunkSize&#39;: this.chunkSize,
       &#39;fileMd5&#39;: this.wul_fileMd5,
       &#39;chunkMd5&#39;: chunkMd5,
       &#39;size&#39;: this.wul_size,
       &#39;sign&#39;: sign
      };
      deferred.resolve();
     }.bind(this))
     return deferred.promise();
    }.bind(this),
    afterSendFile: function (file) {
     var timestamp = Date.parse(new Date()) / 1000;
     var signParam = "{chunkSize=" + this.chunkSize + ", fileMd5=" + this.wul_fileMd5 + ", fileName=" + file.name + ", size=" + this.wul_size + ", timestamp=" + timestamp + "}";
     var sign = Base64.encode(CryptoJS.HmacSHA1(signParam, this.securityKey));
     // 如果分块上传成功,则通知后台合并分块
     jQuery.ajax({
      type: "POST",
      url: this.mergeUrl,
      data: {
       appId: this.appId,
       fileMd5: this.wul_fileMd5,
       fileName: file.name,
       chunkSize: this.chunkSize,
       sign: sign,
       size: this.wul_size,
       timestamp: timestamp
      },
      success: function (response) {
       if (response.responseCode == 0) {
        this.fileObject.status = "success";
        this.fileObject.percentage = 100;
        this.fileObject.url = response.filePath;
       } else {
        this.fileObject.status = "exception";
        this.$message({
         message: "上传失败,失败原因:" + response.responseMsg,
         type: &#39;error&#39;
        });
       }
       this.uploadLoading = false;
       this.stopBtn = true;
       this.wul_uploader.reset();
       this.wul_fileMd5 = "";
       this.wul_size = 0;
       this.wul_fileName = "";
       this.wul_chunk = 0;  //当前切片数
      }.bind(this)
     });
    }.bind(this)
   });
   this.wul_uploader = WebUploader.create({
    // swf文件路径
    swf: &#39;../js/Uploader.swf&#39;,
    // 文件接收服务端。
    server: this.uploadUrl,
    // 定义选择按钮
    pick: {
     "id": "#" + this.id,
     "innerHTML": this.previewName
    },
    // 自动上传
    auto: this.auto,
    // 禁止浏览器打开文件
    disableGlobalDnd: true,
    // 添加截图功能
    paste: &#39;#wrapper&#39;,
    // 定义拖动面板
    dnd: &#39;#wrapper&#39;,
    // 分片上传
    chunked: true,
    // 分片大小为2M
    chunkSize: this.chunkSize,
    // 分片上传失败重试次数
    chunkRetry: this.chunkRetry,
    // 图片不做压缩
    compress: false,
    // 队列设置10个,为了选择多个文件的时候能提示
    fileNumLimit: 10,
    // 提前准备好下一个文件
    prepareNextFile: true,
    // 限制单个文件大小
    fileSingleSizeLimit: this.sizeLimit,
    //线程数
    threads : 1,
    // 限制格式
    accept: {
     title: "access",
     extensions: this.ext
    }
   });
   this.wul_init();
  }
 }
</script>
<style>
 /* ----------------Reset Css--------------------- */
 html, body, p, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
 time, mark, audio, video, input {
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
 }

 html, body, form, fieldset, p, p, h1, h2, h3, h4, h5, h6 {
  -webkit-text-size-adjust: none;
 }

 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
 }

 body {
  font-family: arial, sans-serif;
 }

 ol, ul {
  list-style: none;
 }

 blockquote, q {
  quotes: none;
 }

 blockquote:before, blockquote:after, q:before, q:after {
  content: &#39;&#39;;
  content: none;
 }

 ins {
  text-decoration: none;
 }

 del {
  text-decoration: line-through;
 }

 table {
  border-collapse: collapse;
  border-spacing: 0;
 }

 /* ------------ */
 #wrapper {
  width: 100%;
  margin: 0 auto;
  height: 35px;
 }

 .img-preview {
  width: 160px;
  height: 90px;
  margin-top: 1em;
  border: 1px solid #ccc;
 }

 .cropper-wraper {
  position: relative;
 }

 .upload-btn {
  background: #ffffff;
  border: 1px solid #cfcfcf;
  color: #565656;
  padding: 10px 18px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 10px;
  cursor: pointer;
  font-size: 14px;

  position: absolute;
  right: 1em;
  bottom: 2em;
 }
 .upload-btn:hover {
  background: #f0f0f0;
 }
 .uploader-container{
  width: 100%;
  font-size: 10px;
 }

 .webuploader-container {
  position: relative;
  width: 100px;
  height: 21px;
  float: left;
 }
 .webuploader-element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px,1px,1px,1px);
 }
 .webuploader-pick {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #00b7ee;
  padding: 6px 15px;

  color: #fff;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
 }
 .webuploader-pick-hover {
  background: #00a2d4;
 }

 .webuploader-pick-disable {
  opacity: 0.6;
  pointer-events:none;
 }
 .file-list{
  width: 100%;
 }
</style>

2. Exportieren Sie die Komponente


var fileUpload = require(&#39;./src/file_upload.vue&#39;);

module.exports = {
 fileUpload
}

3. Demo-Referenzmethode


<template>
 <p>
  <el-card class="box-card">
   <fileUpload ref="fileUpload" :ext="ext" :countLimit="5" :tip="tip">aaa</fileUpload>
  </el-card>
 </p>
</template>
<script>
 import {fileUpload} from &#39;@/components/fileUpload/index.js&#39;
 export default{
  name: &#39;hello&#39;,
  components: {fileUpload},
  data(){
   return{
    fileList: [],
    ext: &#39;png,jpg,jpeg,mp3,mp4,pdf&#39;,
    tip: &#39;可上传png/jpg/jpeg/mp3/mp4/pdf,大小不超过200M&#39;
   }
  },
  created(){

  },
  methods: {
   getFileList: function(){
    this.fileList = this.$refs.fileUpload.getFileList();
    console.log(this.fileList);
   }
  }
 }
</script>

4. Operationsrendering

Verwandte Empfehlungen:

Ausführliche Erläuterung von Beispielen der Bootstrap-Dateieingabe-Datei-Upload-Komponente

Fine Uploader-Datei-Upload-Komponentenanwendungseinführung_PHP-Tutorial

vue Alibaba Cloud-Upload-Komponente Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonEntwicklungsbeispiel für die Webuploader-Komponente zum Hochladen von Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn