优化单图上传、多图上传、文件上传
This commit is contained in:
parent
fb3c4c070b
commit
5f7ff57080
@ -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',
|
||||||
|
@ -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);
|
||||||
|
@ -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({
|
||||||
|
@ -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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user