1.1.5 • Published 2 years ago
ecarx-uploader v1.1.5
ecarx-uploader
主要用于KSC的大文件上传,通用组件可扩展到其他项目
1.分片上传,断点续传,秒传等
2.拖动文件夹到区域,上传文件内的所有文件
3.目前暂不支持空文件夹
npm i ecarx-uploader -S
关键性代码
具体参考代码路径
ksc/src/components/BigUpload/index.vue
以下仅为扩展参考,不属于大文件上传范畴,属于KSC文件创建阶段
<a-form-item v-else-if="option.key === 'upload'" :label="$t('common.btn.uploadFile')">
<Uploader :opt="{token:token,uploadUrl:uploadUrl,mergeUrl:mergeUrl}"
v-decorator="['fileList', { initialValue: [], rules: [{ required: true, message: $t('common.rules.waitComplete') }] }]" />
</a-form-item>
绑定表单fileList
import Uploader from '@/components/BigUpload/index';
import auth from '@/utils/auth';
...
data() {
return {
uploadUrl: `${process.env.VUE_APP_API_BASE_URL}/multipartfile/multipartUpload`,
mergeUrl: `${process.env.VUE_APP_API_BASE_URL}/multipartfile/completeMultipartUpload`,
token: auth.getToken(),
...
handleUploadFile(params) {
const { fileList } = params;
// console.log(JSON.stringify(fileList));
// return;
const {
id, pathId, name: cname, path, step, category,
} = this.cPath;
const exist = {};
let flag = 0;
const files = fileList.map((file) => {
// console.log(file);
let finallyName = '';
const {
contentType, downloadUrl, fileId: uid, originalFilename: name, siz, suffix, viewUrl,
} = file || {};
finallyName = name.substr(0, name.lastIndexOf('.')) || name;
const relativePath = file.relativePath || `/${finallyName}${suffix}`;
// 判断同一路径下是否同名
// const aliasName = name.split('.')[0];
const aliasPath = relativePath.substr(0, relativePath.lastIndexOf('.'));
// console.log(aliasName, exist[aliasName]);
if (exist[name]) {
console.log(exist[name].aliasPath === aliasPath);
}
if (exist[name] && exist[name].flag && exist[name].aliasPath === aliasPath) {
flag = 1;
} else {
exist[name] = {};
exist[name].flag = 1;
exist[name].aliasPath = aliasPath;
}
return {
contentType, downloadUrl, uid, name: finallyName, siz, suffix, viewUrl, relativePath,
};
});
// console.log(flag);
if (flag) {
this.$message.error(`${this.$t('pages.fileLib.sameName')}`);
}
const obj = {
pathId: `${pathId}/${id}`,
path: `${path}/${cname}`,
step,
category,
folderId: id,
files,
};
// console.log(obj.files);
// return;
this.fileBatchCreate(obj).then((res) => {
// console.log(res);
const { list } = res;
if (list.length === 0) {
this.visible = false;
this.$bus.$emit('refreshList');
this.$message.success(this.$t('pages.fileLib.createSuccess'));// 创建成功
} else {
// list.forEach((item) => {
this.$message.error(`“${list[0].name}${list[0].suffix}” ${this.$t('pages.fileLib.exist')}`);// 文件名已存在
// });
}
// this.$message[success ? 'success' : 'error'](msg);
});
},