优化单图、多图、文件上传
This commit is contained in:
zjl
parent
f8ba48fc07
commit
b48fe03616
@ -72,7 +72,11 @@
|
||||
} from '@ant-design/icons-vue';
|
||||
import { notification } from 'ant-design-vue';
|
||||
import Cropper from '@/components/Upload/croppers.vue';
|
||||
import OSS from "ali-oss";
|
||||
import OSS from 'ali-oss';
|
||||
|
||||
/**
|
||||
* 定义参数
|
||||
*/
|
||||
interface UploadFileProps {
|
||||
imageUrl?: string; // 图片地址 ==> 必传
|
||||
uploadFileUrl?: string; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
|
||||
@ -89,7 +93,9 @@
|
||||
cropperSize?: Object;
|
||||
}
|
||||
|
||||
// 接受父组件参数
|
||||
/**
|
||||
* 接受父组件参数
|
||||
*/
|
||||
const props = withDefaults(defineProps<UploadFileProps>(), {
|
||||
imageUrl: '',
|
||||
uploadFileUrl: '/admin/file/upload',
|
||||
@ -107,8 +113,11 @@
|
||||
|
||||
// 生成组件唯一id
|
||||
const uuid = ref('id-' + generateUUID());
|
||||
|
||||
const imgViewVisible = ref(false);
|
||||
|
||||
/**
|
||||
* 执行图片预览
|
||||
*/
|
||||
const viewImg = () => {
|
||||
if (props.imageUrl.indexOf('.pdf') < 0) {
|
||||
imgViewVisible.value = true;
|
||||
@ -133,6 +142,9 @@
|
||||
(e: 'changeFileName', value: string): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 定义参数
|
||||
*/
|
||||
const fileName = ref('');
|
||||
const oImg = ref('');
|
||||
const cropperVisible = ref(false);
|
||||
@ -140,10 +152,18 @@
|
||||
const loading = ref(false);
|
||||
const progress = ref(0);
|
||||
|
||||
/**
|
||||
* 裁剪上传
|
||||
* @param fileChile 参数
|
||||
*/
|
||||
const cropperSuccess = (fileChile: any) => {
|
||||
actionFile(fileChile);
|
||||
};
|
||||
//接口上传
|
||||
|
||||
/**
|
||||
* 本地接口上传
|
||||
* @param fileChild 参数
|
||||
*/
|
||||
const actionFile = async (fileChild: any) => {
|
||||
loading.value = true;
|
||||
try {
|
||||
@ -162,29 +182,36 @@
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
//oss上传
|
||||
|
||||
/**
|
||||
* 阿里云OSS上传
|
||||
* @param fileChild 参数
|
||||
*/
|
||||
const actionFiles = async (fileChild: any) => {
|
||||
const configData = await getOssConfig()
|
||||
const configData = await getOssConfig();
|
||||
let date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month: string | number = date.getMonth() + 1;
|
||||
month = month < 10 ? ("0" + month) : month;
|
||||
month = month < 10 ? '0' + month : month;
|
||||
let day: string | number = date.getDate();
|
||||
day = day < 10 ? ("0" + day) : day;
|
||||
day = day < 10 ? '0' + day : day;
|
||||
let h: string | number = date.getHours();
|
||||
h = h < 10 ? ("0" + h) : h;
|
||||
h = h < 10 ? '0' + h : h;
|
||||
let minute: string | number = date.getMinutes();
|
||||
minute = minute < 10 ? ("0" + minute) : minute;
|
||||
minute = minute < 10 ? '0' + minute : minute;
|
||||
let second: string | number = date.getSeconds();
|
||||
second = second < 10 ? ("0" + second) : second;
|
||||
let time = h + "" + minute + "" + second;
|
||||
let filterFileName=time + "-" + fileChild.name
|
||||
filterFileName=filterFileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, '')
|
||||
let filePath = props.name + "/" + year + "/" + month + "/" + day + "/" + filterFileName;
|
||||
loading.value=true
|
||||
second = second < 10 ? '0' + second : second;
|
||||
let time = h + '' + minute + '' + second;
|
||||
let filterFileName = time + '-' + fileChild.name;
|
||||
filterFileName = filterFileName.replace(
|
||||
/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g,
|
||||
'',
|
||||
);
|
||||
let filePath = props.name + '/' + year + '/' + month + '/' + day + '/' + filterFileName;
|
||||
loading.value = true;
|
||||
try {
|
||||
const headers = {
|
||||
"Access-Control-Allow-Origin": "*"
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
};
|
||||
const client = new OSS({
|
||||
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
|
||||
@ -196,13 +223,13 @@
|
||||
accessKeySecret: configData.oss_accessKeySecret,
|
||||
// 填写Bucket名称。
|
||||
bucket: configData.oss_bucketName,
|
||||
timeout: 600000
|
||||
timeout: 600000,
|
||||
});
|
||||
const res = await client.multipartUpload(filePath, fileChild, {
|
||||
headers: headers,
|
||||
// 获取分片上传进度、断点和返回值。
|
||||
progress: (p, cpt, res) => {
|
||||
progress.value= parseFloat(parseFloat(p * 100).toFixed(2))
|
||||
progress.value = parseFloat(parseFloat(p * 100).toFixed(2));
|
||||
handleHttpUploadOptions.value.onProgress({ percent: progress.value });
|
||||
},
|
||||
// 设置并发上传的分片数量。
|
||||
@ -210,21 +237,23 @@
|
||||
// 设置分片大小。默认值为1 MB，最小值为100 KB。
|
||||
partSize: 1024 * 1024,
|
||||
// headers,
|
||||
mime: fileChild.type
|
||||
mime: fileChild.type,
|
||||
});
|
||||
emit('update:imageUrl', configData.oss_domain + res.name);
|
||||
emit('changeFileName',fileChild.name)
|
||||
emit('changeFileName', fileChild.name);
|
||||
} catch (error) {
|
||||
emit('update:imageUrl', '');
|
||||
emit('changeFileName','')
|
||||
emit('changeFileName', '');
|
||||
} finally {
|
||||
progress.value=0
|
||||
loading.value=false
|
||||
}
|
||||
progress.value = 0;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行文件上传
|
||||
*/
|
||||
const handleHttpUploadOptions = ref({});
|
||||
|
||||
const handleHttpUpload = async (options) => {
|
||||
handleHttpUploadOptions.value = options;
|
||||
if (props.cropper) {
|
||||
|
||||
@ -48,11 +48,13 @@
|
||||
ZoomInOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { notification } from 'ant-design-vue';
|
||||
import OSS from "ali-oss";
|
||||
import OSS from 'ali-oss';
|
||||
const uploadRef = ref();
|
||||
import { upload, getOssConfig } from '@/api/common';
|
||||
|
||||
// 接受父组件参数
|
||||
/**
|
||||
* 接受父组件参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
zIndex: {
|
||||
default: -1,
|
||||
@ -107,12 +109,14 @@
|
||||
return props.disabled;
|
||||
});
|
||||
let editIndex = '';
|
||||
|
||||
const emit = defineEmits(['upload']);
|
||||
const progress = ref(0);
|
||||
const loading = ref(false);
|
||||
|
||||
//接口上传
|
||||
/**
|
||||
* 本地接口上传
|
||||
* @param options 参数
|
||||
*/
|
||||
const handleHttpUpload = async (options) => {
|
||||
loading.value = true;
|
||||
try {
|
||||
@ -160,29 +164,32 @@
|
||||
}
|
||||
};
|
||||
|
||||
//oss上传
|
||||
/**
|
||||
* 阿里云OSS上传
|
||||
* @param options 参数
|
||||
*/
|
||||
const handleHttpUploads = async (options: UploadRequestOptions) => {
|
||||
const configData = await getOssConfig()
|
||||
const configData = await getOssConfig();
|
||||
let date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month: string | number = date.getMonth() + 1;
|
||||
month = month < 10 ? ("0" + month) : month;
|
||||
month = month < 10 ? '0' + month : month;
|
||||
let day: string | number = date.getDate();
|
||||
day = day < 10 ? ("0" + day) : day;
|
||||
day = day < 10 ? '0' + day : day;
|
||||
let h: string | number = date.getHours();
|
||||
h = h < 10 ? ("0" + h) : h;
|
||||
h = h < 10 ? '0' + h : h;
|
||||
let minute: string | number = date.getMinutes();
|
||||
minute = minute < 10 ? ("0" + minute) : minute;
|
||||
minute = minute < 10 ? '0' + minute : minute;
|
||||
let second: string | number = date.getSeconds();
|
||||
second = second < 10 ? ("0" + second) : second;
|
||||
let time = h + "" + minute + "" + second;
|
||||
let fileName = time + "-" + options.file.name
|
||||
fileName = fileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, '')
|
||||
let filePath = props.name + "/" + year + "/" + month + "/" + day + "/" + fileName;
|
||||
second = second < 10 ? '0' + second : second;
|
||||
let time = h + '' + minute + '' + second;
|
||||
let fileName = time + '-' + options.file.name;
|
||||
fileName = fileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, '');
|
||||
let filePath = props.name + '/' + year + '/' + month + '/' + day + '/' + fileName;
|
||||
loading.value = true;
|
||||
try {
|
||||
const headers = {
|
||||
"Access-Control-Allow-Origin": "*"
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
};
|
||||
const client = new OSS({
|
||||
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
|
||||
@ -194,13 +201,13 @@
|
||||
accessKeySecret: configData.oss_accessKeySecret,
|
||||
// 填写Bucket名称。
|
||||
bucket: configData.oss_bucketName,
|
||||
timeout: 600000
|
||||
timeout: 600000,
|
||||
});
|
||||
const res = await client.multipartUpload(filePath, options.file, {
|
||||
headers: headers,
|
||||
// 获取分片上传进度、断点和返回值。
|
||||
progress: (p, cpt, res) => {
|
||||
progress.value = parseFloat(parseFloat(p * 100).toFixed(2))
|
||||
progress.value = parseFloat(parseFloat(p * 100).toFixed(2));
|
||||
options.onProgress({ percent: parseFloat(parseFloat(p * 100).toFixed(2)) });
|
||||
},
|
||||
// 设置并发上传的分片数量。
|
||||
@ -208,31 +215,31 @@
|
||||
// 设置分片大小。默认值为1 MB，最小值为100 KB。
|
||||
partSize: 1024 * 1024,
|
||||
// headers,
|
||||
mime: options.file.type
|
||||
mime: options.file.type,
|
||||
});
|
||||
// 文件地址拼接
|
||||
const fileUrl = configData.oss_domain + res.name;
|
||||
if (props.multiple) {
|
||||
let list = JSON.parse(JSON.stringify(props.fileList))
|
||||
let list = JSON.parse(JSON.stringify(props.fileList));
|
||||
if (editIndex !== '') {
|
||||
list.splice(editIndex, 1, {
|
||||
url: fileUrl,
|
||||
name: options.file.name,
|
||||
filePath: fileUrl,
|
||||
fileName: options.file.name
|
||||
})
|
||||
editIndex = ''
|
||||
fileName: options.file.name,
|
||||
});
|
||||
editIndex = '';
|
||||
} else {
|
||||
list.push({
|
||||
url: fileUrl,
|
||||
name: options.file.name,
|
||||
filePath: fileUrl,
|
||||
fileName: options.file.name
|
||||
})
|
||||
fileName: options.file.name,
|
||||
});
|
||||
}
|
||||
emit('upload', list,props.zIndex)
|
||||
emit('upload', list, props.zIndex);
|
||||
} else {
|
||||
emit("upload", fileUrl, options.file.name, props.zIndex);
|
||||
emit('upload', fileUrl, options.file.name, props.zIndex);
|
||||
}
|
||||
} catch (error) {
|
||||
notification.error({
|
||||
@ -247,19 +254,33 @@
|
||||
}
|
||||
options.onError(error as any);
|
||||
} finally {
|
||||
progress.value = 0
|
||||
progress.value = 0;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行图片预览
|
||||
* @param index 参数
|
||||
*/
|
||||
const onPreview = (index: any) => {
|
||||
window.open(props.fileList[index].filePath);
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行编辑
|
||||
* @param index 参数
|
||||
*/
|
||||
const handleEdit = (index: any) => {
|
||||
editIndex = index;
|
||||
const dom = document.querySelector(`.ant-upload #${uuid.value}`);
|
||||
dom && dom.dispatchEvent(new MouseEvent('click'));
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行删除
|
||||
* @param index 参数
|
||||
*/
|
||||
const handleRemove = (index: any) => {
|
||||
editIndex = index;
|
||||
if (props.multiple) {
|
||||
@ -274,6 +295,9 @@
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置最大允许上传张数
|
||||
*/
|
||||
const onExceed = () => {
|
||||
if (props.limit) {
|
||||
notification.warning({
|
||||
|
||||
@ -60,11 +60,13 @@
|
||||
import { notification } from 'ant-design-vue';
|
||||
import { generateUUID } from '@/utils/auth';
|
||||
|
||||
import OSS from "ali-oss";
|
||||
import OSS from 'ali-oss';
|
||||
const uploadRef = ref();
|
||||
import { upload, getOssConfig } from '@/api/common';
|
||||
|
||||
// 接受父组件参数
|
||||
/**
|
||||
* 接受父组件参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
zIndex: {
|
||||
default: -1,
|
||||
@ -119,7 +121,6 @@
|
||||
|
||||
// 生成组件唯一id
|
||||
const uuid = ref('id-' + generateUUID());
|
||||
|
||||
const getCSSProperties = computed(() => {
|
||||
return {
|
||||
width: `${props.width}px`,
|
||||
@ -133,7 +134,11 @@
|
||||
const emit = defineEmits(['upload']);
|
||||
|
||||
const loading = ref(false);
|
||||
//接口上传
|
||||
|
||||
/**
|
||||
* 本地接口上传
|
||||
* @param options 参数
|
||||
*/
|
||||
const handleHttpUpload = async (options) => {
|
||||
if (!props.autoUpload) {
|
||||
emit('upload', options);
|
||||
@ -172,31 +177,36 @@
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
//oss上传
|
||||
|
||||
/**
|
||||
* 阿里云OSS上传
|
||||
* @param options 参数
|
||||
*/
|
||||
const handleHttpUploads = async (options: UploadRequestOptions) => {
|
||||
if (!props.autoUpload) {
|
||||
emit('upload', options);
|
||||
return;
|
||||
}
|
||||
const configData = await getOssConfig()
|
||||
const configData = await getOssConfig();
|
||||
let date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month: string | number = date.getMonth() + 1;
|
||||
month = month < 10 ? ("0" + month) : month;
|
||||
month = month < 10 ? '0' + month : month;
|
||||
let day: string | number = date.getDate();
|
||||
day = day < 10 ? ("0" + day) : day;
|
||||
day = day < 10 ? '0' + day : day;
|
||||
let h: string | number = date.getHours();
|
||||
h = h < 10 ? ("0" + h) : h;
|
||||
h = h < 10 ? '0' + h : h;
|
||||
let minute: string | number = date.getMinutes();
|
||||
minute = minute < 10 ? ("0" + minute) : minute;
|
||||
minute = minute < 10 ? '0' + minute : minute;
|
||||
let second: string | number = date.getSeconds();
|
||||
second = second < 10 ? ("0" + second) : second;
|
||||
let time = h + "" + minute + "" + second;
|
||||
let name = props.name + "/"+ year + "/" + month + "/" + day + "/" + time + "-" + options.file.name;
|
||||
second = second < 10 ? '0' + second : second;
|
||||
let time = h + '' + minute + '' + second;
|
||||
let name =
|
||||
props.name + '/' + year + '/' + month + '/' + day + '/' + time + '-' + options.file.name;
|
||||
loading.value = true;
|
||||
try {
|
||||
const headers = {
|
||||
"Access-Control-Allow-Origin": "*"
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
};
|
||||
const client = new OSS({
|
||||
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
|
||||
@ -208,7 +218,7 @@
|
||||
accessKeySecret: configData.oss_accessKeySecret,
|
||||
// 填写Bucket名称。
|
||||
bucket: configData.oss_bucketName,
|
||||
timeout: 600000
|
||||
timeout: 600000,
|
||||
});
|
||||
const res = await client.multipartUpload(name, options.file, {
|
||||
headers: headers,
|
||||
@ -221,7 +231,7 @@
|
||||
// 设置分片大小。默认值为1 MB，最小值为100 KB。
|
||||
partSize: 1024 * 1024,
|
||||
// headers,
|
||||
mime: options.file.type
|
||||
mime: options.file.type,
|
||||
});
|
||||
if (props.multiple) {
|
||||
let list = JSON.parse(JSON.stringify(props.fileList));
|
||||
@ -233,7 +243,7 @@
|
||||
});
|
||||
emit('upload', list, props.zIndex);
|
||||
} else {
|
||||
emit("upload", configData.oss_domain + res.name,options.file.name, props.zIndex);
|
||||
emit('upload', configData.oss_domain + res.name, options.file.name, props.zIndex);
|
||||
}
|
||||
} catch (error) {
|
||||
notification.error({
|
||||
@ -251,11 +261,18 @@
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* 执行游览
|
||||
* @param uploadFile 文件
|
||||
*/
|
||||
const onPreview = (uploadFile) => {
|
||||
window.open(uploadFile?.url);
|
||||
};
|
||||
|
||||
/**
|
||||
* 执行删除
|
||||
* @param file 文件参数
|
||||
*/
|
||||
const handleRemove = (file: any) => {
|
||||
if (props.multiple) {
|
||||
emit(
|
||||
|
||||
@ -53,7 +53,8 @@
|
||||
@change-file-name="(name) => (formData.coverImgName = name)"
|
||||
:fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
|
||||
name="article"
|
||||
:fileSize="200"
|
||||
:fileSize="20"
|
||||
:limit="5"
|
||||
v-model:image-url="formData.cover"
|
||||
>
|
||||
<template #tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user