优化单图上传、多图上传、文件上传

This commit is contained in:
zjl 2024-12-23 09:34:50 +08:00
parent fb3c4c070b
commit 5f7ff57080
4 changed files with 89 additions and 13 deletions

View File

@ -1,6 +1,10 @@
import { http } from '@/utils/http/axios'; import { http } from '@/utils/http/axios';
//图片上传 /**
*
* @param data
* @returns
*/
export function upload(data) { export function upload(data) {
return http.request({ return http.request({
url: '/upload/uploadFile', url: '/upload/uploadFile',
@ -11,7 +15,12 @@ export function upload(data) {
}, },
}); });
} }
// oss
/**
* OSS账号
* @param params
* @returns
*/
export function getOssConfig(params?) { export function getOssConfig(params?) {
return http.request({ return http.request({
url: '/config/item/getItemList/config_oss', url: '/config/item/getItemList/config_oss',

View File

@ -112,13 +112,17 @@
(e: 'changeFileName', value: string): void; (e: 'changeFileName', value: string): void;
} }
const fileName = ref(''); /**
const oImg = ref(''); * 定义参数
*/
const emit = defineEmits<UploadEmits>(); const emit = defineEmits<UploadEmits>();
const loading = ref(false); const loading = ref(false);
const progress = ref(0); const progress = ref(0);
// /**
* 本地接口上传
* @param fileChild 文件
*/
const actionFile = async (fileChild: any) => { const actionFile = async (fileChild: any) => {
loading.value = true; loading.value = true;
try { try {
@ -137,7 +141,11 @@
loading.value = false; loading.value = false;
} }
}; };
//oss
/**
* 阿里云OSS上传
* @param fileChild 文件
*/
const actionFiles = async (fileChild: any) => { const actionFiles = async (fileChild: any) => {
console.log(fileChild); console.log(fileChild);
const configData = await getOssConfig(); const configData = await getOssConfig();
@ -202,6 +210,11 @@
loading.value = false; loading.value = false;
} }
}; };
/**
* 执行文件上传
* @param options 参数
*/
const handleHttpUpload = async (options) => { const handleHttpUpload = async (options) => {
handleHttpUploadOptions.value = options; handleHttpUploadOptions.value = options;
actionFile(options.file.file); actionFile(options.file.file);

View File

@ -54,7 +54,9 @@
const uploadRef = ref(); const uploadRef = ref();
import { upload, getOssConfig } from '@/api/common'; import { upload, getOssConfig } from '@/api/common';
// /**
* 接受父组件参数
*/
const props = defineProps({ const props = defineProps({
zIndex: { zIndex: {
default: -1, default: -1,
@ -120,12 +122,19 @@
emit('update:modelValue', fileList.value); emit('update:modelValue', fileList.value);
}, },
}); });
let editIndex = '';
/**
* 定义参数
*/
let editIndex = '';
const emit = defineEmits(['upload']); const emit = defineEmits(['upload']);
const progress = ref(0); const progress = ref(0);
const loading = ref(false); const loading = ref(false);
//
/**
* 本地接口上传
* @param options 参数
*/
const handleHttpUpload = async (options) => { const handleHttpUpload = async (options) => {
loading.value = true; loading.value = true;
try { try {
@ -173,7 +182,11 @@
loading.value = false; loading.value = false;
} }
}; };
//oss
/**
* 阿里云OSS上传
* @param options 参数
*/
const handleHttpUploads = async (options: UploadRequestOptions) => { const handleHttpUploads = async (options: UploadRequestOptions) => {
console.log(options); console.log(options);
const configData = await getOssConfig(); const configData = await getOssConfig();
@ -263,18 +276,37 @@
loading.value = false; loading.value = false;
} }
}; };
/**
* 执行文件上传
* @param data 参数
*/
const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => { const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => {
handleHttpUpload(data); handleHttpUpload(data);
}; };
/**
* 文件预览
* @param index 参数
*/
const onPreview = (index: any) => { const onPreview = (index: any) => {
window.open(fileList.value[index].filePath); window.open(fileList.value[index].filePath);
}; };
/**
* 执行编辑
* @param index 参数
*/
const handleEdit = (index: any) => { const handleEdit = (index: any) => {
editIndex = index; editIndex = index;
const dom = document.querySelector(`#${uuid.value} .n-upload-file-input`); const dom = document.querySelector(`#${uuid.value} .n-upload-file-input`);
dom && dom.dispatchEvent(new MouseEvent('click')); dom && dom.dispatchEvent(new MouseEvent('click'));
}; };
/**
* 执行删除
* @param index 参数
*/
const handleRemove = (index: any) => { const handleRemove = (index: any) => {
editIndex = index; editIndex = index;
if (props.multiple) { if (props.multiple) {
@ -289,6 +321,9 @@
} }
}; };
/**
* 最大上传张数限制
*/
const onExceed = () => { const onExceed = () => {
if (props.limit) { if (props.limit) {
notification.warning({ notification.warning({

View File

@ -69,7 +69,9 @@
const uploadRef = ref(); const uploadRef = ref();
import { upload, getOssConfig } from '@/api/common'; import { upload, getOssConfig } from '@/api/common';
// /**
* 接受父组件参数
*/
const props = defineProps({ const props = defineProps({
zIndex: { zIndex: {
default: -1, default: -1,
@ -147,7 +149,11 @@
const emit = defineEmits(['upload']); const emit = defineEmits(['upload']);
const loading = ref(false); const loading = ref(false);
//
/**
* 接口上传
* @param options 参数
*/
const handleHttpUpload = async (options) => { const handleHttpUpload = async (options) => {
if (!props.autoUpload) { if (!props.autoUpload) {
emit('upload', options); emit('upload', options);
@ -188,7 +194,11 @@
loading.value = false; loading.value = false;
} }
}; };
//oss
/**
* 阿里云OSS上传
* @param options 参数
*/
const handleHttpUploads = async (options: UploadRequestOptions) => { const handleHttpUploads = async (options: UploadRequestOptions) => {
console.log(options); console.log(options);
if (!props.autoUpload) { if (!props.autoUpload) {
@ -267,12 +277,21 @@
loading.value = false; loading.value = false;
} }
}; };
/**
* 执行文件上传
* @param data 参数
*/
const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => { const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => {
if (!delFlag.value) { if (!delFlag.value) {
handleHttpUpload(data); handleHttpUpload(data);
} }
}; };
/**
* 执行删除
* @param file 参数
*/
const handleRemove = (file: any) => { const handleRemove = (file: any) => {
delFlag.value = true; delFlag.value = true;
if (props.multiple) { if (props.multiple) {