gitadmin/wms-elevue
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化多图、文件上传

Browse Source
This commit is contained in:
zjl 2024-12-20 15:55:11 +08:00
parent f75eef20bc
commit b1135d2d4d
2 changed files with 91 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/Upload/Images.vue
View File

@ -51,7 +51,7 @@
import { ElNotification, UploadFile, UploadInstance } from 'element-plus'; import { ElNotification, UploadFile, UploadInstance } from 'element-plus';
import type { UploadProps, UploadRequestOptions } from 'element-plus'; import type { UploadProps, UploadRequestOptions } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'; import { Plus } from '@element-plus/icons-vue';
import OSS from "ali-oss"; import OSS from 'ali-oss';
import { generateUUID } from '@/utils/auth'; import { generateUUID } from '@/utils/auth';
const uploadRef = ref<UploadInstance>(); const uploadRef = ref<UploadInstance>();
@ -119,7 +119,11 @@
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: UploadRequestOptions) => { const handleHttpUpload = async (options: UploadRequestOptions) => {
loading.value = true; loading.value = true;
try { try {
@ -167,29 +171,33 @@
loading.value = false; loading.value = false;
} }
}; };
//oss上传
/**
* OSS文件上传
* @param options 参数
*/
const handleHttpUploads = async (options: UploadRequestOptions) => { const handleHttpUploads = async (options: UploadRequestOptions) => {
const configData = await getOssConfig() const configData = await getOssConfig();
let date = new Date(); let date = new Date();
let year = date.getFullYear(); let year = date.getFullYear();
let month: string | number = date.getMonth() + 1; 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(); let day: string | number = date.getDate();
day = day < 10 ? ("0" + day) : day; day = day < 10 ? '0' + day : day;
let h: string | number = date.getHours(); let h: string | number = date.getHours();
h = h < 10 ? ("0" + h) : h; h = h < 10 ? '0' + h : h;
let minute: string | number = date.getMinutes(); let minute: string | number = date.getMinutes();
minute = minute < 10 ? ("0" + minute) : minute; minute = minute < 10 ? '0' + minute : minute;
let second: string | number = date.getSeconds(); let second: string | number = date.getSeconds();
second = second < 10 ? ("0" + second) : second; second = second < 10 ? '0' + second : second;
let time = h + "" + minute + "" + second; let time = h + '' + minute + '' + second;
let fileName = (props.orderNo ? (time + '-' + props.orderNo) : time) + "-" + options.file.name let fileName = (props.orderNo ? time + '-' + props.orderNo : time) + '-' + options.file.name;
fileName = fileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, '') fileName = fileName.replace(/[\+\_\,\!\|\~\`\(\)\#\$\%\^\&\*\{\}\:\;\"\<\>\?]/g, '');
let filePath = props.name + "/" + year + "/" + month + "/" + day + "/" + fileName; let filePath = props.name + '/' + year + '/' + month + '/' + day + '/' + fileName;
loading.value = true; loading.value = true;
try { try {
const headers = { const headers = {
"Access-Control-Allow-Origin": "*" 'Access-Control-Allow-Origin': '*',
}; };
const client = new OSS({ const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。 // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
@ -201,13 +209,13 @@
accessKeySecret: configData.oss_accessKeySecret, accessKeySecret: configData.oss_accessKeySecret,
// 填写Bucket名称。 // 填写Bucket名称。
bucket: configData.oss_bucketName, bucket: configData.oss_bucketName,
timeout: 600000 timeout: 600000,
}); });
const res = await client.multipartUpload(filePath, options.file, { const res = await client.multipartUpload(filePath, options.file, {
headers: headers, headers: headers,
// 获取分片上传进度、断点和返回值。 // 获取分片上传进度、断点和返回值。
progress: (p, cpt, res) => { 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)) }); options.onProgress({ percent: parseFloat(parseFloat(p * 100).toFixed(2)) });
}, },
// 设置并发上传的分片数量。 // 设置并发上传的分片数量。
@ -215,36 +223,38 @@
// 设置分片大小。默认值为1 MB，最小值为100 KB。 // 设置分片大小。默认值为1 MB，最小值为100 KB。
partSize: 1024 * 1024, partSize: 1024 * 1024,
// headers, // headers,
mime: options.file.type mime: options.file.type,
}); });
console.log(res) console.log(res);
// 文件地址拼接
const fileUrl = configData.oss_domain + res.name;
if (props.multiple) { if (props.multiple) {
let list = JSON.parse(JSON.stringify(props.fileList)) let list = JSON.parse(JSON.stringify(props.fileList));
if (editIndex !== '') { if (editIndex !== '') {
list.splice(editIndex, 1, { list.splice(editIndex, 1, {
url:res.res.requestUrls[0], url: fileUrl,
name: options.file.name, name: options.file.name,
filePath: res.res.requestUrls[0], filePath: fileUrl,
fileName: options.file.name fileName: options.file.name,
}) });
editIndex = '' editIndex = '';
} else { } else {
list.push({ list.push({
url: res.res.requestUrls[0], url: fileUrl,
name: options.file.name, name: options.file.name,
filePath: res.res.requestUrls[0], filePath: fileUrl, //res.res.requestUrls[0],
fileName: options.file.name fileName: options.file.name,
}) });
} }
emit('upload', list,props.zIndex) emit('upload', list, props.zIndex);
} else { } else {
emit("upload", res.res.requestUrls[0], options.file.name, props.zIndex); emit('upload', fileUrl, options.file.name, props.zIndex);
} }
} catch (error) { } catch (error) {
ElNotification({ ElNotification({
title: "温馨提示", title: '温馨提示',
message: "上传文件失败！", message: '上传文件失败！',
type: "error" type: 'error',
}); });
if (props.multiple) { if (props.multiple) {
emit('upload', props.fileList, props.zIndex); emit('upload', props.fileList, props.zIndex);
@ -254,7 +264,7 @@
} }
options.onError(error as any); options.onError(error as any);
} finally { } finally {
progress.value = 0 progress.value = 0;
loading.value = false; loading.value = false;
} }
}; };

38
src/components/Upload/file.vue
View File

@ -53,7 +53,7 @@
import { ElNotification, UploadFile, UploadInstance } from 'element-plus'; import { ElNotification, UploadFile, UploadInstance } from 'element-plus';
import type { UploadProps, UploadRequestOptions } from 'element-plus'; import type { UploadProps, UploadRequestOptions } from 'element-plus';
import { generateUUID } from '@/utils/auth'; import { generateUUID } from '@/utils/auth';
import OSS from "ali-oss"; import OSS from 'ali-oss';
const uploadRef = ref<UploadInstance>(); const uploadRef = ref<UploadInstance>();
import { upload, getOssConfig } from '@/api/common'; import { upload, getOssConfig } from '@/api/common';
@ -117,7 +117,10 @@
const loading = ref(false); const loading = ref(false);
//接口上传 /**
* 本地文件上传
* @param options 参数
*/
const handleHttpUpload = async (options: UploadRequestOptions) => { const handleHttpUpload = async (options: UploadRequestOptions) => {
loading.value = true; loading.value = true;
try { try {
@ -154,27 +157,32 @@
loading.value = false; loading.value = false;
} }
}; };
//oss上传
/**
* OSS文件上传
* @param options 参数
*/
const handleHttpUploads = async (options: UploadRequestOptions) => { const handleHttpUploads = async (options: UploadRequestOptions) => {
const configData = await getOssConfig() const configData = await getOssConfig();
let date = new Date(); let date = new Date();
let year = date.getFullYear(); let year = date.getFullYear();
let month: string | number = date.getMonth() + 1; 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(); let day: string | number = date.getDate();
day = day < 10 ? ("0" + day) : day; day = day < 10 ? '0' + day : day;
let h: string | number = date.getHours(); let h: string | number = date.getHours();
h = h < 10 ? ("0" + h) : h; h = h < 10 ? '0' + h : h;
let minute: string | number = date.getMinutes(); let minute: string | number = date.getMinutes();
minute = minute < 10 ? ("0" + minute) : minute; minute = minute < 10 ? '0' + minute : minute;
let second: string | number = date.getSeconds(); let second: string | number = date.getSeconds();
second = second < 10 ? ("0" + second) : second; second = second < 10 ? '0' + second : second;
let time = h + "" + minute + "" + second; let time = h + '' + minute + '' + second;
let name = props.name + "/"+ year + "/" + month + "/" + day + "/" + time + "-" + options.file.name; let name =
props.name + '/' + year + '/' + month + '/' + day + '/' + time + '-' + options.file.name;
loading.value = true; loading.value = true;
try { try {
const headers = { const headers = {
"Access-Control-Allow-Origin": "*" 'Access-Control-Allow-Origin': '*',
}; };
const client = new OSS({ const client = new OSS({
// yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。 // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
@ -186,7 +194,7 @@
accessKeySecret: configData.oss_accessKeySecret, accessKeySecret: configData.oss_accessKeySecret,
// 填写Bucket名称。 // 填写Bucket名称。
bucket: configData.oss_bucketName, bucket: configData.oss_bucketName,
timeout: 600000 timeout: 600000,
}); });
const res = await client.multipartUpload(name, options.file, { const res = await client.multipartUpload(name, options.file, {
headers: headers, headers: headers,
@ -199,7 +207,7 @@
// 设置分片大小。默认值为1 MB，最小值为100 KB。 // 设置分片大小。默认值为1 MB，最小值为100 KB。
partSize: 1024 * 1024, partSize: 1024 * 1024,
// headers, // headers,
mime: options.file.type mime: options.file.type,
}); });
if (props.multiple) { if (props.multiple) {
let list = JSON.parse(JSON.stringify(props.fileList)); let list = JSON.parse(JSON.stringify(props.fileList));
@ -211,7 +219,7 @@
}); });
emit('upload', list, props.zIndex); emit('upload', list, props.zIndex);
} else { } else {
emit("upload", res.res.requestUrls[0],options.file.name, props.zIndex); emit('upload', res.res.requestUrls[0], options.file.name, props.zIndex);
} }
} catch (error) { } catch (error) {
ElNotification({ ElNotification({