webuploader와 결합된 Vue2.0을 통해 슬라이스에서 파일 업로드 기능을 구현하는 방법(자세한 튜토리얼)

이 글에서는 웹업로더와 결합된 Vue2.0의 기능을 주로 소개하여 파일을 부분적으로 업로드할 수 있습니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

대용량 파일을 부분적으로 업로드하는 문제가 발생했습니다. 이전에 사용했던 Vue 프로젝트입니다. webuploader를 통과한 후 Vue2.0을 webuploader와 결합하고 vue 업로드 컴포넌트를 캡슐화하면 사용하기 더 편해집니다.

그냥 올리는데 왜 굳이 나누어서 올리나요?

조각화와 동시성을 결합하여 대용량 파일을 여러 블록으로 나누어 동시에 업로드하므로 대용량 파일의 업로드 속도가 크게 향상됩니다.

네트워크 문제로 인해 전송 오류가 발생하는 경우 전체 파일이 아닌 잘못된 부분만 재전송하면 됩니다. 또한 조각난 전송을 통해 업로드 진행 상황을 보다 실시간으로 추적할 수 있습니다.

구현 후 인터페이스:

주로 두 개의 파일, 캡슐화된 업로드 구성 요소와 특정 UI 페이지가 아래에 나열되어 있습니다. 이 두 페이지의 코드는 github: https://github.com/shady-xia/Blog/tree/master/vue-webuploader에 있습니다.

프로젝트에 webuploader를 도입하세요

1. 먼저 jquery를 시스템에 도입하세요(플러그인은 jq 기반이므로 사기입니다!). index.html에 있습니다.

2. 공식 웹사이트에서 Uploader.swf 및 webuploader.min.js 를 다운로드하세요. 이 파일은 프로젝트의 정적 디렉터리에 위치할 수 있습니다. index.html .js. Uploader.swf 和 webuploader.min.js ，可以放到项目静态目录 static 下面；在 index.html 中引入webuploader.min.js。

（无需单独再引入 webuploader.css ，因为没有几行css，我们可以复制到vue组件中。）
<script src="/static/lib/jquery-2.2.3.min.js"></script>
<script src="/static/lib/webuploader/webuploader.min.js"></script>

需要注意的点：

1.在vue组件中，通过 import './webuploader'; 的方式引入webuploader，会报''caller', 'callee', and 'arguments' properties may not be accessed on strict mode ...'的错， 这是因为你的babel使用了严格模式，而caller这些在严格模式下禁止使用。所以 可以直接在index.html中引入webuploader.js ，或者手动去解决babel中'use strict'的问题。

基于webuploader封装Vue组件

封装好的组件upload.vue如下，接口可以根据具体的业务进行扩展。

注意：功能和ui分离，此组建封装好了基本的功能，没有提供ui，ui在具体的页面上去实现。

<template>
 <p class="upload">
 </p>
</template>
<script>
 export default {
  name: &#39;vue-upload&#39;,
  props: {
   accept: {
    type: Object,
    default: null,
   },
   // 上传地址
   url: {
    type: String,
    default: &#39;&#39;,
   },
   // 上传最大数量 默认为100
   fileNumLimit: {
    type: Number,
    default: 100,
   },
   // 大小限制 默认2M
   fileSingleSizeLimit: {
    type: Number,
    default: 2048000,
   },
   // 上传时传给后端的参数，一般为token，key等
   formData: {
    type: Object,
    default: null
   },
   // 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议
   keyGenerator: {
    type: Function,
    default(file) {
     const currentTime = new Date().getTime();
     const key = `${currentTime}.${file.name}`;
     return key;
    },
   },
   multiple: {
    type: Boolean,
    default: false,
   },
   // 上传按钮ID
   uploadButton: {
    type: String,
    default: &#39;&#39;,
   },
  },
  data() {
   return {
    uploader: null
   };
  },
  mounted() {
   this.initWebUpload();
  },
  methods: {
   initWebUpload() {
    this.uploader = WebUploader.create({
     auto: true, // 选完文件后，是否自动上传
     swf: &#39;/static/lib/webuploader/Uploader.swf&#39;, // swf文件路径
     server: this.url, // 文件接收服务端
     pick: {
      id: this.uploadButton,  // 选择文件的按钮
      multiple: this.multiple, // 是否多文件上传 默认false
      label: &#39;&#39;,
     },
     accept: this.getAccept(this.accept), // 允许选择文件格式。
     threads: 3,
     fileNumLimit: this.fileNumLimit, // 限制上传个数
     //fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
     formData: this.formData, // 上传所需参数
     chunked: true,   //分片上传
     chunkSize: 2048000, //分片大小
     duplicate: true, // 重复上传
    });
    // 当有文件被添加进队列的时候，添加到页面预览
    this.uploader.on(&#39;fileQueued&#39;, (file) => {
     this.$emit(&#39;fileChange&#39;, file);
    });
    this.uploader.on(&#39;uploadStart&#39;, (file) => {
     // 在这里可以准备好formData的数据
     //this.uploader.options.formData.key = this.keyGenerator(file);
    });
    // 文件上传过程中创建进度条实时显示。
    this.uploader.on(&#39;uploadProgress&#39;, (file, percentage) => {
     this.$emit(&#39;progress&#39;, file, percentage);
    });
    this.uploader.on(&#39;uploadSuccess&#39;, (file, response) => {
     this.$emit(&#39;success&#39;, file, response);
    });
    this.uploader.on(&#39;uploadError&#39;, (file, reason) => {
     console.error(reason);
     this.$emit(&#39;uploadError&#39;, file, reason);
    });
    this.uploader.on(&#39;error&#39;, (type) => {
     let errorMessage = &#39;&#39;;
     if (type === &#39;F_EXCEED_SIZE&#39;) {
      errorMessage = `文件大小不能超过${this.fileSingleSizeLimit / (1024 * 1000)}M`;
     } else if (type === &#39;Q_EXCEED_NUM_LIMIT&#39;) {
      errorMessage = &#39;文件上传已达到最大上限数&#39;;
     } else {
      errorMessage = `上传出错！请检查后重新上传！错误代码${type}`;
     }
     console.error(errorMessage);
     this.$emit(&#39;error&#39;, errorMessage);
    });
    this.uploader.on(&#39;uploadComplete&#39;, (file, response) => {
     this.$emit(&#39;complete&#39;, file, response);
    });
   },
   upload(file) {
    this.uploader.upload(file);
   },
   stop(file) {
    this.uploader.stop(file);
   },
   // 取消并中断文件上传
   cancelFile(file) {
    this.uploader.cancelFile(file);
   },
   // 在队列中移除文件
   removeFile(file, bool) {
    this.uploader.removeFile(file, bool);
   },
   getAccept(accept) {
    switch (accept) {
     case &#39;text&#39;:
      return {
       title: &#39;Texts&#39;,
       exteensions: &#39;doc,docx,xls,xlsx,ppt,pptx,pdf,txt&#39;,
       mimeTypes: &#39;.doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt&#39;
      };
      break;
     case &#39;video&#39;:
      return {
       title: &#39;Videos&#39;,
       exteensions: &#39;mp4&#39;,
       mimeTypes: &#39;.mp4&#39;
      };
      break;
     case &#39;image&#39;:
      return {
       title: &#39;Images&#39;,
       exteensions: &#39;gif,jpg,jpeg,bmp,png&#39;,
       mimeTypes: &#39;.gif,.jpg,.jpeg,.bmp,.png&#39;
      };
      break;
     default: return accept
    }
   },
  },
 };
</script>
<style lang="scss">
// 直接把官方的css粘过来就行了
</style>

使用封装好的上传组件

新建页面，使用例子如下：

ui需要自己去实现。 大概的代码可以点这里 。

<vue-upload
    ref="uploader"
    url="xxxxxx"
    uploadButton="#filePicker"
    multiple
    @fileChange="fileChange"
    @progress="onProgress"
    @success="onSuccess"
></vue-upload>

分片的原理及流程

当我们上传一个大文件时，会被插件分片，ajax请求如下：

 

1.多个upload请求均为分片的请求，把大文件分成多个小份一次一次向服务器传递

2.分片完成后，即upload完成后，需要向服务器传递一个merge请求，让服务器将多个分片文件合成一个文件
分片

可以看到发起了多次 upload 的请求，我们来看看 upload 发送的具体参数：

 

第一个配置( content-disposition )中的 guid 和第二个配置中的 access_token ，是我们通过webuploader配置里的 formData ，即传递给服务器的参数

后面几个配置是文件内容，id、name、type、size等

其中 chunks 为总分片数， chunk 为当前第几个分片。图片中分别为12和9。当你看到chunk是11的upload请求时，代表这是最后一个upload请求了。

合并

分片后，文件还未整合，数据大概是下面这个样子：

 

做完了分片后，其实工作还没完，我们还要再发送个ajax请求给服务器，告诉他把我们上传的几个分片合并成一个完整的文件。

我怎么知道分片上传完了，我在何时做合并？

webuploader插件有一个事件是 uploadSuccess rrreee

주의할 점:

1. vue 구성 요소에서 import './webuploader'를 통해 webuploader를 도입하면 ''가 보고됩니다. caller', 'callee' 및 'arguments' 속성은 엄격 모드에서 액세스할 수 없습니다...'라는 오류는 바벨이 엄격 모드를 사용하고 호출자가 엄격 모드에서 사용되는 것이 금지되어 있기 때문입니다. 따라서 index.html에 webuploader.js를 직접 도입하거나, babel에서 'use strict' 문제를 수동으로 해결할 수도 있습니다.

🎜🎜🎜webuploader 기반 Vue 컴포넌트 캡슐화🎜🎜🎜🎜패키징된 컴포넌트 upload.vue는 다음과 같으며, 특정 업무에 따라 인터페이스를 확장할 수 있습니다. 🎜🎜참고: 기능과 UI가 분리되어 있습니다. 이 구성 요소는 기본 기능을 캡슐화하며 UI는 특정 페이지에 구현되지 않습니다. 🎜rrreee🎜🎜🎜캡슐화된 업로드 구성 요소🎜🎜🎜🎜를 사용하여 새 페이지를 만듭니다. 사용 예는 다음과 같습니다. 🎜🎜ui는 직접 구현해야 합니다. 대략적인 코드는 여기에서 확인할 수 있습니다. 🎜rrreee🎜🎜🎜조각화의 원리와 과정🎜🎜🎜🎜대용량 파일을 업로드하면 플러그인에 의해 조각화되는데, ajax 요청은 다음과 같습니다.🎜🎜 🎜🎜1. 다중 업로드 요청은 모두 조각난 요청입니다. 대용량 파일은 여러 개의 작은 부분으로 나뉩니다. 🎜🎜2. 조각화가 완료된 후, 즉 업로드가 완료된 후 서버가 여러 조각난 파일을 하나의 파일로 결합할 수 있도록 병합 요청을 서버에 전달해야 합니다.
조각화🎜🎜 여러 개의 업로드 요청이 시작된 것을 볼 수 있습니다. 업로드로 전송된 특정 매개변수를 살펴보겠습니다. 🎜🎜 🎜🎜첫 번째 구성의 guid( content-disposition )와 두 번째 구성의 access_token은 formData입니다. 서버에 전달되는 매개변수인 webuploader 구성에서🎜🎜다음 몇 가지 각 구성은 파일 내용, ID, 이름, 유형, 크기 등입니다. 🎜🎜 여기서 청크는 총 샤드 수이고 청크는 현재 샤드. 사진에서는 각각 12세와 9세입니다. 청크 11이 포함된 업로드 요청이 표시되면 이것이 마지막 업로드 요청임을 의미합니다. 🎜🎜🎜🎜병합 후🎜🎜🎜🎜 파일이 아직 통합되지 않았으며 데이터는 아마도 다음과 같습니다: 🎜🎜 🎜🎜샤딩을 완료한 후에도 작업은 실제로 아직 끝나지 않았습니다. 서버에 또 다른 Ajax 요청을 보내고 서버에게 여러 샤드를 병합하라고 지시해야 합니다. 완전한 문서로 업로드됩니다. 🎜🎜멀티파트 업로드가 완료되었는지 어떻게 알 수 있으며 언제 병합해야 하나요? 🎜🎜webuploader 플러그인에는 uploadSuccess 라는 이벤트가 있습니다. 여기에는 모든 조각이 업로드될 때 백그라운드에서 반환되는 파일과 응답이라는 두 개의 매개변수가 포함되어 있습니다. Triggered, 🎜 🎜서버에서 반환한 필드를 사용하여 병합 여부를 결정할 수 있습니다. 🎜🎜예를 들어 needMerge가 백그라운드에서 반환되면 이것이 사실임을 확인하면 병합 요청을 보낼 수 있습니다. 🎜🎜🎜🎜

알려진 문제

단일 파일 업로드를 일시 중지하고 계속할 때 이 플러그인의 버그가 발견되었습니다.

1. threads>1 ，使用单文件上传功能，即stop方法传入file时，会报错 Uncaught TypeError: Cannot read property 'file' of undefined

설정 시 발생한 오류의 소스 코드는 다음과 같습니다. 일시 중지할 때 다음 파일 전송을 계속 허용하면 일시 중지된 파일 스트림이 현재 풀에서 나옵니다. 여기서 루프가 만들어지고 마지막 루프에서는 v가 정의되지 않습니다.

2. 스레드를 1로 설정하면 정상적으로 일시 정지가 가능하지만 일시 정지 후 업로드는 실패합니다.

원리는 이전과 동일합니다. 일시 정지 중에는 현재 모든 파일 스트림이 풀에 표시됩니다. 파일이 업로드되기 시작하면 현재 풀이 확인됩니다. 파일 스트림.

모든 파일을 전체적으로 일시정지했다가 다시 시작하는 경우 기능은 정상입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

노드 모듈에 대한 심층적인 이해

콘솔을 사용하여 디버그하는 10가지 고급 기술 요약

vuejs와 v-에서 v-if와 v-show의 차이점 쇼가 작동하지 않아요 질문

위 내용은 webuploader와 결합된 Vue2.0을 통해 슬라이스에서 파일 업로드 기능을 구현하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!