优化多图、文件上传
This commit is contained in:
zjl
parent
f75eef20bc
commit
b1135d2d4d
@ -51,11 +51,11 @@
|
||||
import { ElNotification, UploadFile, UploadInstance } from 'element-plus';
|
||||
import type { UploadProps, UploadRequestOptions } from 'element-plus';
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
import OSS from "ali-oss";
|
||||
import OSS from 'ali-oss';
|
||||
import { generateUUID } from '@/utils/auth';
|
||||
|
||||
const uploadRef = ref<UploadInstance>();
|
||||
import { upload,getOssConfig } from '@/api/common';
|
||||
import { upload, getOssConfig } from '@/api/common';
|
||||
|
||||
// 接受父组件参数
|
||||
const props = defineProps({
|
||||
@ -119,7 +119,11 @@
|
||||
const emit = defineEmits(['upload']);
|
||||
const progress = ref(0);
|
||||
const loading = ref(false);
|
||||
//接口上传
|
||||
|
||||
/**
|
||||
* 本地文件上传
|
||||
* @param options 参数
|
||||
*/
|
||||
const handleHttpUpload = async (options: UploadRequestOptions) => {
|
||||
loading.value = true;
|
||||
try {
|
||||
@ -167,29 +171,33 @@
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
//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 = (props.orderNo ? (time + '-' + props.orderNo) : 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 = (props.orderNo ? time + '-' + props.orderNo : 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。
|
||||
@ -201,13 +209,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)) });
|
||||
},
|
||||
// 设置并发上传的分片数量。
|
||||
@ -215,36 +223,38 @@
|
||||
// 设置分片大小。默认值为1 MB，最小值为100 KB。
|
||||
partSize: 1024 * 1024,
|
||||
// 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) {
|
||||
let list = JSON.parse(JSON.stringify(props.fileList))
|
||||
let list = JSON.parse(JSON.stringify(props.fileList));
|
||||
if (editIndex !== '') {
|
||||
list.splice(editIndex, 1, {
|
||||
url:res.res.requestUrls[0],
|
||||
url: fileUrl,
|
||||
name: options.file.name,
|
||||
filePath: res.res.requestUrls[0],
|
||||
fileName: options.file.name
|
||||
})
|
||||
editIndex = ''
|
||||
filePath: fileUrl,
|
||||
fileName: options.file.name,
|
||||
});
|
||||
editIndex = '';
|
||||
} else {
|
||||
list.push({
|
||||
url: res.res.requestUrls[0],
|
||||
url: fileUrl,
|
||||
name: options.file.name,
|
||||
filePath: res.res.requestUrls[0],
|
||||
fileName: options.file.name
|
||||
})
|
||||
filePath: fileUrl, //res.res.requestUrls[0],
|
||||
fileName: options.file.name,
|
||||
});
|
||||
}
|
||||
emit('upload', list,props.zIndex)
|
||||
emit('upload', list, props.zIndex);
|
||||
} else {
|
||||
emit("upload", res.res.requestUrls[0], options.file.name, props.zIndex);
|
||||
emit('upload', fileUrl, options.file.name, props.zIndex);
|
||||
}
|
||||
} catch (error) {
|
||||
ElNotification({
|
||||
title: "温馨提示",
|
||||
message: "上传文件失败！",
|
||||
type: "error"
|
||||
title: '温馨提示',
|
||||
message: '上传文件失败！',
|
||||
type: 'error',
|
||||
});
|
||||
if (props.multiple) {
|
||||
emit('upload', props.fileList, props.zIndex);
|
||||
@ -254,10 +264,10 @@
|
||||
}
|
||||
options.onError(error as any);
|
||||
} finally {
|
||||
progress.value = 0
|
||||
progress.value = 0;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const onPreview = (index: any) => {
|
||||
window.open(props.fileList[index].filePath);
|
||||
|
||||
@ -53,10 +53,10 @@
|
||||
import { ElNotification, UploadFile, UploadInstance } from 'element-plus';
|
||||
import type { UploadProps, UploadRequestOptions } from 'element-plus';
|
||||
import { generateUUID } from '@/utils/auth';
|
||||
import OSS from "ali-oss";
|
||||
import OSS from 'ali-oss';
|
||||
|
||||
const uploadRef = ref<UploadInstance>();
|
||||
import { upload,getOssConfig } from '@/api/common';
|
||||
import { upload, getOssConfig } from '@/api/common';
|
||||
|
||||
// 接受父组件参数
|
||||
const props = defineProps({
|
||||
@ -117,7 +117,10 @@
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
//接口上传
|
||||
/**
|
||||
* 本地文件上传
|
||||
* @param options 参数
|
||||
*/
|
||||
const handleHttpUpload = async (options: UploadRequestOptions) => {
|
||||
loading.value = true;
|
||||
try {
|
||||
@ -154,27 +157,32 @@
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
//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 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。
|
||||
@ -186,22 +194,22 @@
|
||||
accessKeySecret: configData.oss_accessKeySecret,
|
||||
// 填写Bucket名称。
|
||||
bucket: configData.oss_bucketName,
|
||||
timeout: 600000
|
||||
timeout: 600000,
|
||||
});
|
||||
const res = await client.multipartUpload(name, options.file, {
|
||||
headers: headers,
|
||||
// 获取分片上传进度、断点和返回值。
|
||||
progress: (p, cpt, res) => {
|
||||
options.onProgress({percent: parseFloat(parseFloat(p * 100).toFixed(2))});
|
||||
options.onProgress({ percent: parseFloat(parseFloat(p * 100).toFixed(2)) });
|
||||
},
|
||||
// 设置并发上传的分片数量。
|
||||
parallel: 4,
|
||||
// 设置分片大小。默认值为1 MB，最小值为100 KB。
|
||||
partSize: 1024 * 1024,
|
||||
// headers,
|
||||
mime: options.file.type
|
||||
mime: options.file.type,
|
||||
});
|
||||
if(props.multiple){
|
||||
if (props.multiple) {
|
||||
let list = JSON.parse(JSON.stringify(props.fileList));
|
||||
list.push({
|
||||
url: res.res.requestUrls[0],
|
||||
@ -210,8 +218,8 @@
|
||||
fileName: options.file.name,
|
||||
});
|
||||
emit('upload', list, props.zIndex);
|
||||
}else{
|
||||
emit("upload", res.res.requestUrls[0],options.file.name, props.zIndex);
|
||||
} else {
|
||||
emit('upload', res.res.requestUrls[0], options.file.name, props.zIndex);
|
||||
}
|
||||
} catch (error) {
|
||||
ElNotification({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user