163 lines
4.2 KiB
Vue
163 lines
4.2 KiB
Vue
<template>
|
||
<uploader
|
||
:options="options"
|
||
:file-status-text="statusText"
|
||
:autoStart="false"
|
||
@file-added="fileAdded"
|
||
@file-progress="onFileProgress"
|
||
@file-success="onFileSuccess"
|
||
@file-error="onFileError"
|
||
class="uploader-example"
|
||
>
|
||
<uploader-unsupport></uploader-unsupport>
|
||
<uploader-drop>
|
||
<p>拖拽文件至此或点击</p>
|
||
<uploader-btn>选择文件</uploader-btn>
|
||
</uploader-drop>
|
||
<uploader-list></uploader-list>
|
||
</uploader>
|
||
</template>
|
||
|
||
<script>
|
||
var notUploadedChunks = []; // 已经上传过的文件chunkNumber数组
|
||
var isUploaded = false; // 文件已经上传成功了
|
||
import { mapGetters } from "vuex";
|
||
import { checkFileMd5,mergeFileMd5 } from "@/api/simpleUploader";
|
||
import SparkMD5 from "spark-md5";
|
||
const path = process.env.VUE_APP_BASE_API;
|
||
export default {
|
||
name: "simpleUploader",
|
||
data(){
|
||
return{
|
||
md5:""
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters("user", ["userInfo", "token"]),
|
||
statusText() {
|
||
return {
|
||
success: "成功了",
|
||
error: "出错了",
|
||
uploading: "上传中",
|
||
paused: "暂停中",
|
||
waiting: "等待中"
|
||
};
|
||
},
|
||
options() {
|
||
return {
|
||
target: path + "/simpleUploader/upload",
|
||
testChunks: false,
|
||
simultaneousUploads: 5,
|
||
chunkSize: 2 * 1024 * 1024,
|
||
headers: {
|
||
"x-token": this.token,
|
||
"x-user-id": this.userInfo.ID
|
||
},
|
||
checkChunkUploadedByResponse(chunk) {
|
||
if (isUploaded) {
|
||
return true; // return true 会忽略当前文件，不会再发送给后台
|
||
} else {
|
||
// 根据已经上传过的切片来进行忽略
|
||
return (
|
||
notUploadedChunks &&
|
||
notUploadedChunks.some(
|
||
item => item.chunkNumber == chunk.offset + 1
|
||
)
|
||
);
|
||
}
|
||
}
|
||
};
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
// 上传单个文件
|
||
fileAdded(file) {
|
||
this.computeMD5(file); // 生成MD5
|
||
},
|
||
// 计算MD5值
|
||
computeMD5(file) {
|
||
var that = this;
|
||
isUploaded = false; // 这个文件是否已经上传成功过
|
||
notUploadedChunks = []; // 未成功的chunkNumber
|
||
var fileReader = new FileReader();
|
||
var md5 = "";
|
||
|
||
file.pause();
|
||
|
||
fileReader.readAsArrayBuffer(file.file);
|
||
fileReader.onload = async function(e) {
|
||
if (file.size != e.target.result.byteLength) {
|
||
this.error(
|
||
"Browser reported success but could not read the file until the end."
|
||
);
|
||
return false;
|
||
}
|
||
md5 = SparkMD5.ArrayBuffer.hash(e.target.result, false);
|
||
|
||
file.uniqueIdentifier = md5;
|
||
if (md5 != "") {
|
||
const res = await checkFileMd5({ md5: md5 });
|
||
if (res.code == 0) {
|
||
if (res.data.isDone) {
|
||
// 上传成功过
|
||
isUploaded = true;
|
||
that.$message({
|
||
message: "该文件已经上传成功过了，秒传成功。",
|
||
type: "success"
|
||
});
|
||
|
||
file.cancel();
|
||
} else {
|
||
isUploaded = false;
|
||
notUploadedChunks = res.data.chunks;
|
||
if(notUploadedChunks.length){
|
||
file.resume();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
};
|
||
fileReader.onerror = function() {
|
||
this.error(
|
||
"generater md5 时FileReader异步读取文件出错了，FileReader onerror was triggered, maybe the browser aborted due to high memory usage."
|
||
);
|
||
return false;
|
||
};
|
||
},
|
||
// 上传进度
|
||
onFileProgress() {},
|
||
// 上传成功
|
||
async onFileSuccess(rootFile, file) {
|
||
await mergeFileMd5({md5:file.uniqueIdentifier,fileName:file.name})
|
||
},
|
||
onFileError(rootFile, file, response) {
|
||
this.$message({
|
||
message: response,
|
||
type: "error"
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.uploader-example {
|
||
width: 880px;
|
||
padding: 15px;
|
||
margin: 115px 15px 20px;
|
||
font-size: 12px;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
|
||
}
|
||
.uploader-example .uploader-btn {
|
||
margin-right: 4px;
|
||
}
|
||
.uploader-example .uploader-list {
|
||
max-height: 440px;
|
||
overflow: auto;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
</style> |