feat(Upload): 兼容ant-design-vue的upload属性 (#1247)

1. 兼容`name`属性,用于自定义发到后台的文件参数名; 2. 兼容`filename`属性

Co-authored-by: erniu <joe.cheng237@gmail.com>
This commit is contained in:
erniu 2021-10-05 22:53:21 +08:00 committed by GitHub
parent 2849743a4d
commit 935d4fc12d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 11 deletions

View File

@ -187,8 +187,12 @@
item.status = UploadResultStatus.UPLOADING; item.status = UploadResultStatus.UPLOADING;
const { data } = await props.api?.( const { data } = await props.api?.(
{ {
data: {
...(props.uploadParams || {}), ...(props.uploadParams || {}),
},
file: item.file, file: item.file,
name: props.name,
filename: props.filename,
}, },
function onUploadProgress(progressEvent: ProgressEvent) { function onUploadProgress(progressEvent: ProgressEvent) {
const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0; const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;

View File

@ -34,6 +34,14 @@ export const basicProps = {
default: null, default: null,
required: true, required: true,
}, },
name: {
type: String as PropType<string>,
default: 'file',
},
filename: {
type: String as PropType<string>,
default: null,
},
}; };
export const uploadContainerProps = { export const uploadContainerProps = {

View File

@ -5,7 +5,7 @@ import axios from 'axios';
import qs from 'qs'; import qs from 'qs';
import { AxiosCanceler } from './axiosCancel'; import { AxiosCanceler } from './axiosCancel';
import { isFunction } from '/@/utils/is'; import { isFunction } from '/@/utils/is';
import { cloneDeep, omit } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import { ContentTypeEnum } from '/@/enums/httpEnum'; import { ContentTypeEnum } from '/@/enums/httpEnum';
import { RequestEnum } from '/@/enums/httpEnum'; import { RequestEnum } from '/@/enums/httpEnum';
@ -121,11 +121,17 @@ export class VAxios {
*/ */
uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) { uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
const formData = new window.FormData(); const formData = new window.FormData();
const customFilename = params.name || 'file';
if (params.filename) {
formData.append(customFilename, params.file, params.filename);
} else {
formData.append(customFilename, params.file);
}
if (params.data) { if (params.data) {
Object.keys(params.data).forEach((key) => { Object.keys(params.data).forEach((key) => {
if (!params.data) return; const value = params.data![key];
const value = params.data[key];
if (Array.isArray(value)) { if (Array.isArray(value)) {
value.forEach((item) => { value.forEach((item) => {
formData.append(`${key}[]`, item); formData.append(`${key}[]`, item);
@ -133,15 +139,9 @@ export class VAxios {
return; return;
} }
formData.append(key, params.data[key]); formData.append(key, params.data![key]);
}); });
} }
formData.append(params.name || 'file', params.file, params.filename);
const customParams = omit(params, 'file', 'filename', 'file');
Object.keys(customParams).forEach((key) => {
formData.append(key, customParams[key]);
});
return this.axiosInstance.request<T>({ return this.axiosInstance.request<T>({
...config, ...config,