vue使⽤webuploader⼤⽂件分⽚上传完整代码
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script src="<%= BASE_URL %>static/jquery-3.4.1.min.js"></script> <script src="<%= BASE_URL %>static/jquery-3.4.1.min.js"></script> <script src="<%= BASE_URL %>static/webuploader.min.js"></script> </html>
uploader.vue
<template>
<div>
<div>
<div id="filePicker">选择⽂件</div>
<div class="file-panel">
<h2>⽂件列表</h2>
<div class="file-list">
<ul class="file-item" :class="`file-${file.id}`" v-for="file in fileList">
jquery下载文件请求<li class="file-type" :icon=")"></li>
<li class="file-name">{{file.name}}</li>
<li class="file-size">{{fileSize(file.size)}}</li>
<li class="file-status">上传中...</li>
<li class="file-operate">
<!-- <a title="开始" @click="upload(file)"><Icon type="ios-play" /></a> -->
<!-- <a title="暂停" @click="stop(file)"><Icon type="ios-pause" /></a> -->
<a title="移除" @click="remove(file)">
<Icon type="ios-trash" size='20' />
</a>
</li>
</ul>
<div class="no-file" v-if="!fileList.length"><i class="iconfont icon-empty-file"></i> 暂⽆待上传⽂件</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getToken } from "@/libs/util";
import config from "@/config";
// import {
// deleteFile
// } from "@/api/project/file.js";
export default {
name: 'vue-upload',
props:{
uploadType: {//在内容管理⾥⽂件下载或者视频上传中⽤到分⽚上传
type: String,
default: ""
},
},
data() {
return {
timer: null,
filepath: '', //上传⽂件后获得的导⼊⽂件地址
fileList: [],
url: v.NODE_ENV === 'development' ? (config.baseUrl.dev + '/api/UpLoadService/FPUploadFile/FPUploadFile') : ( config.baseUrl.pro + '/api/UpLoadService/FPUploadFile/FPUploadFile'),
uploader: null,
accept: null,cabala studio
multiple: false,
fileSingleSizeLimit: 2048000,
fileNumLimit: 1,
importpercent: 0,
connection: Object,
currentStep: 0,
ddctferrorkey:''
};
},
created() {},
mounted() {
this.$nextTick(() => {
this.initWebUpload();
});
},
methods: {
initWebUpload() {
let formData={uploadType:this.uploadType,};
console.log(this.url+'=======')
this.uploader = ate({
auto: true, // 选完⽂件后，是否⾃动上传
swf: './static/Uploader.swf', // swf⽂件路径
server: this.url, // ⽂件接收服务端
pick: "#filePicker", //this.uploadButton, // 选择⽂件的按钮
accept: {
title: 'All',
exteensions: 'doc,docx,xls,xlsx,ppt,pptx,pdf,txt,wps,mp4,mp3,jpg,jpeg,png,rm,avi,mpeg,ogg,dwg',
mimeTypes: '.doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt,.wps,.mp4,.map3,.jpg,.jpeg,.png,.rm,.avi,.mpeg,.ogg,.dwg' }, // 允许选择⽂件格式。
threads: 1,
fileNumLimit: (this.uploadType=="download")?undefined:1, // 限制上传个数
//fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图⽚的⼤⼩
formData: formData, // 上传所需参数
python开发框架有哪些chunked: true, //分⽚上传
chunkSize: 2048000, //分⽚⼤⼩单片机c语言while循环
//duplicate: true, // 重复上传
fileVal: new Date().getTime(),
resize: false,
compress:false//是否压缩图⽚，默认true
});
fresh()
height是什么词性// 当有⽂件被添加进队列的时候，添加到页⾯预览
('fileQueued', (file) => {
if (!file.size) return;
this.fileList.push(file);
});
('uploadStart', (file) => {
// 在这⾥可以准备好formData的数据
//this.uploader.options.formData.key = this.keyGenerator(file);
});
('uploadBeforeSend', (obj,data,headers) => {
// 当某个⽂件的分块在发送前触发
$.extend(headers,{"Authorization": "Bearer " + getToken(),"RuntoAccessType": "Endpoint"}) // headers = {RuntoAccessType: "Endpoint"}
});
// ⽂件上传过程中创建进度条实时显⽰。
('uploadProgress', (file, percent) => {
$(`.file-${file.id} .progress`).css('width', percent * 100 + '%');
$(`.file-${file.id} .file-status`).html((percent * 100).toFixed(2) + '%');
});
('uploadSuccess', (file, response) => {
if(response.Code==200){
let info=response.Data[0];
let idx=this.fileList.findIndex(item=>item.name.split('.')[0]==info.FileName);
this.fileList[idx]=Object.assign({},this.fileList[idx],info)
this.$emit('upload',response.Data);
}else{
/
/this.$(response.Message)
this.$({
title: '上传失败',
desc: response.Message
});
}
//this.filepath = Url
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论