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

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';
//图片上传
/**
*
* @param data
* @returns
*/
export function upload(data) {
return http.request({
url: '/upload/uploadFile',
@ -11,7 +15,12 @@ export function upload(data) {
},
});
}
// oss
/**
* OSS账号
* @param params
* @returns
*/
export function getOssConfig(params?) {
return http.request({
url: '/config/item/getItemList/config_oss',

View File

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

View File

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

View File

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