vue大文件分片上传vue

编程入门行业动态更新时间:2024-10-11 09:25:14

vue大文件<a href=https://www.elefans.com/category/jswz/34/1770841.html style= 分片上传vue"/>

vue大文件分片上传vue

vue大文件分片上传vue-simple-uploader使用

自定义组件的封装，默认样式修改

vue 插槽的使用

文件上传介绍

关于小文件上传类似图片之类的，我们可以直接用很多ui框架封装的上传组件，或者自己写一个input 上传，利用FormData 对象提交文件数据，
但是对于比较大的文件，比如我的这个项目就要求在客户端上传2G左右的文件（难受，http那种），就需要将文件分片上传（file.slice()），否则中间http长时间连接可能会断掉。

我这里使用的是vue-simple-uploader，一个基于simple-uploader封装的上传插件，因此你需要先了解simple-uploader及vue-simple-uploader相关API

地址：

simple-uploader

vue-simple-uploader

样式：/

options配置及processParams参数

<script>
var resourceId = "";//保存资源id
import SparkMD5 from "spark-md5";export default {data() {return {//上传组件配置options: {target: UPLOAD,testChunks: false, //是否开启服务器分片校验maxChunkRetries: 5, //最大自动失败重试上传次数chunkSize: 3 * 1024 * 1024,//分片大小singleFile: true,//单文件上传simultaneousUploads: 1,processParams(params) {//每一次分片传给后台的参数，params是该方法返回的形参，包含分片信息return {//返回一个对象，会添加到每一个分片的请求参数里面name: params.filename,code: params.identifier,total: params.totalChunks,index: params.chunkNumber,resourceId,};}},attrs: {accept: ".zip"}};},

组件通信我采用的是bus管理，在挂载是监听，销毁时注销监听事件，当然你如果是父子通信就没有这么复杂

  mounted() {//组件通信，需要监听开始上传，具体按自己业务决定  this.$root.Bus.$on("addResourceUpload", (params) => {this.dialogVisible = true;setTimeout(() => {//隐藏原来的上传按钮，模拟点击开始上传  document.querySelector("#global-uploader-btn").click();}, 50);});},destroyed() {this.$root.Bus.$off("addResourceUpload")},

文件上传各个阶段回调，下面几个回调一般都会用到

    //文件添加时回调，这里可以做格式校验，md5计算  onFileAdded(file) {let typeName = file.file.name;let reg = /\.zip$/;if (!reg.test(typeName)) {file.ignored = true;this.$alert("上传文件格式不正确，请检查", "上传错误", {confirmButtonText: "确定",callback: action => {}});} else {// 计算MD5;thisputeMD5(file);}},//所有分片上传完成的回调，需要注意的是，由于异步上传，每一次分片上传不会等上一次响应回来才发送，//因此该上传成功的回调时，返回的分片响应可能不是最后一片，因此后续会发送合并请求告诉后台进行合并文件onFileSuccess(rootFile, file, message, chunk) { //所有分片上传成功，发送合并分片请求，具体参数与后台确定，后台合并文件},//文件上传的过程中会频繁调用该函数onFileProgress(rootFile, file, chunk) {},//文件上传出错的回调onFileError(rootFile, file, msg, chunk) { }

计算Md5,生成唯一标识uniqueIdentifier

    computeMD5(file) {let that = this;let fileReader = new FileReader();let md5 = "";file.pause();//先暂停，后续生成uniqueIdentifierfileReader.readAsArrayBuffer(file.file);fileReader.onload = e => {if (file.size != e.target.result.byteLength) {this.error("文件读取失败");return;}md5 = SparkMD5.hash(file.name);//业务需求以文件名作为加密file.uniqueIdentifier = md5;if (md5 != "") {file.resume();//继续上传文件}};fileReader.onerror = function() {this.error("文件读取失败");};},

uploader-list组件可以上传多个文件，多个file对象放在该组件里面上传，之前我是想做多个文件上传，发现浏览器较卡并且后台也不好处理，
于是就做单个大文件上传，单文件的话你可以不用uploader-list，直接使用uploader-file，我这里就不做修改了，uploader-file组件就是存放file对象的相关信息

vue-simple-uploader源码的uploader-file组件部分代码：

<template><div class="uploader-file" :status="status"><slot:file="file":list="list":status="status":paused="paused":error="error":response="response":average-speed="averageSpeed":formated-average-speed="formatedAverageSpeed":current-speed="currentSpeed":is-complete="isComplete":is-uploading="isUploading":size="size":formated-size="formatedSize":uploaded-size="uploadedSize":progress="progress":progress-style="progressStyle":progressing-class="progressingClass":time-remaining="timeRemaining":formated-time-remaining="formatedTimeRemaining":type="type":extension="extension":file-category="fileCategory"><div class="uploader-file-progress" :class="progressingClass" :style="progressStyle"></div><div class="uploader-file-info"><div class="uploader-file-name"><i class="uploader-file-icon" :icon="fileCategory"></i>{{file.name}}</div><div class="uploader-file-size">{{formatedSize}}</div><div class="uploader-file-meta"></div><div class="uploader-file-status"><span v-show="status !== 'uploading'">{{statusText}}</span><span v-show="status === 'uploading'"><span>{{progressStyle.progress}}</span><em>{{formatedAverageSpeed}}</em><i>{{formatedTimeRemaining}}</i></span></div><div class="uploader-file-actions"><span class="uploader-file-pause" @click="pause"></span><span class="uploader-file-resume" @click="resume">️</span><span class="uploader-file-retry" @click="retry"></span><span class="uploader-file-remove" @click="remove"></span></div></div></slot></div>
</template><script>import Uploader from 'simple-uploader.js'import events from '../common/file-events'import { secondsToStr } from '../common/utils'const COMPONENT_NAME = 'uploader-file'export default {data () {return {response: null,paused: false,error: false,averageSpeed: 0,currentSpeed: 0,isComplete: false,isUploading: false,size: 0,formatedSize: '',uploadedSize: 0,progress: 0,timeRemaining: 0,type: '',extension: '',progressingClass: ''}} }
</script>

插槽的使用、修改默认样式

修改默认样式之前推荐看一下vue-simple-uploader源码，方便后续修改操作，在这里我们需要使用插槽，替换掉uploader-file默认元素，这里使用slot，代码如下：

<uploader-file :file="file" :list="true" ref="uploaderFile" :pauseFlag="pauseFlag"><template slot-scope="props"><div class="filebox"><p class="fileNameBox"><span class="fileIcon"></span>{{file.name}}</p><p class="fileProgressBox"><el-progressclass="progressLength":percentage="parseInt((props.progress.toFixed(2))*100-1<0?0:(props.progress.toFixed(2))*100-1)"></el-progress><span:class="{statusBtn:!pauseFlag,resumeBtn:pauseFlag}"class="progressBtn"@click="pause(file,file.resourceId)"></span><span class="cancelBtn progressBtn" @click="remove(file,file.resourceId)"></span></p><p class="fileInfoBox"><span class="fileInfoItem">速度：{{pauseFlag? 0: props.formatedAverageSpeed}}</span><spanclass="fileInfoItem">已上传：{{(parseFloat(props.formatedSize)*props.progress).toFixed(1)}}/{{props.formatedSize}}</span><spanclass="fileInfoItem">剩余时间：{{pauseFlag? 0: props.formatedTimeRemaining}}</span></p></div></template>
</uploader-file>

<template slot-scope="props"> props可以获取到组件数据,比如props.formatedAverageSpeed获取格式化后的上传平均速度，
props.formatedTimeRemaining获取剩余时间等

具体样式代码我就不贴出来了，可以自行修改。

更多推荐

vue大文件分片上传vue

本文发布于:2024-02-26 12:48:01，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1702524.html