Commit 935d4fc12d46631e9ed465e4a0e68cfa822aac26

Authored by erniu
Committed by GitHub
1 parent 2849743a

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

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

Co-authored-by: erniu <joe.cheng237@gmail.com>
src/components/Upload/src/UploadModal.vue
@@ -187,8 +187,12 @@ @@ -187,8 +187,12 @@
187 item.status = UploadResultStatus.UPLOADING; 187 item.status = UploadResultStatus.UPLOADING;
188 const { data } = await props.api?.( 188 const { data } = await props.api?.(
189 { 189 {
190 - ...(props.uploadParams || {}), 190 + data: {
  191 + ...(props.uploadParams || {}),
  192 + },
191 file: item.file, 193 file: item.file,
  194 + name: props.name,
  195 + filename: props.filename,
192 }, 196 },
193 function onUploadProgress(progressEvent: ProgressEvent) { 197 function onUploadProgress(progressEvent: ProgressEvent) {
194 const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0; 198 const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
src/components/Upload/src/props.ts
@@ -34,6 +34,14 @@ export const basicProps = { @@ -34,6 +34,14 @@ export const basicProps = {
34 default: null, 34 default: null,
35 required: true, 35 required: true,
36 }, 36 },
  37 + name: {
  38 + type: String as PropType<string>,
  39 + default: 'file',
  40 + },
  41 + filename: {
  42 + type: String as PropType<string>,
  43 + default: null,
  44 + },
37 }; 45 };
38 46
39 export const uploadContainerProps = { 47 export const uploadContainerProps = {
src/utils/http/axios/Axios.ts
@@ -5,7 +5,7 @@ import axios from &#39;axios&#39;; @@ -5,7 +5,7 @@ import axios from &#39;axios&#39;;
5 import qs from 'qs'; 5 import qs from 'qs';
6 import { AxiosCanceler } from './axiosCancel'; 6 import { AxiosCanceler } from './axiosCancel';
7 import { isFunction } from '/@/utils/is'; 7 import { isFunction } from '/@/utils/is';
8 -import { cloneDeep, omit } from 'lodash-es'; 8 +import { cloneDeep } from 'lodash-es';
9 import { ContentTypeEnum } from '/@/enums/httpEnum'; 9 import { ContentTypeEnum } from '/@/enums/httpEnum';
10 import { RequestEnum } from '/@/enums/httpEnum'; 10 import { RequestEnum } from '/@/enums/httpEnum';
11 11
@@ -121,11 +121,17 @@ export class VAxios { @@ -121,11 +121,17 @@ export class VAxios {
121 */ 121 */
122 uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) { 122 uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
123 const formData = new window.FormData(); 123 const formData = new window.FormData();
  124 + const customFilename = params.name || 'file';
  125 +
  126 + if (params.filename) {
  127 + formData.append(customFilename, params.file, params.filename);
  128 + } else {
  129 + formData.append(customFilename, params.file);
  130 + }
124 131
125 if (params.data) { 132 if (params.data) {
126 Object.keys(params.data).forEach((key) => { 133 Object.keys(params.data).forEach((key) => {
127 - if (!params.data) return;  
128 - const value = params.data[key]; 134 + const value = params.data![key];
129 if (Array.isArray(value)) { 135 if (Array.isArray(value)) {
130 value.forEach((item) => { 136 value.forEach((item) => {
131 formData.append(`${key}[]`, item); 137 formData.append(`${key}[]`, item);
@@ -133,15 +139,9 @@ export class VAxios { @@ -133,15 +139,9 @@ export class VAxios {
133 return; 139 return;
134 } 140 }
135 141
136 - formData.append(key, params.data[key]); 142 + formData.append(key, params.data![key]);
137 }); 143 });
138 } 144 }
139 - formData.append(params.name || 'file', params.file, params.filename);  
140 - const customParams = omit(params, 'file', 'filename', 'file');  
141 -  
142 - Object.keys(customParams).forEach((key) => {  
143 - formData.append(key, customParams[key]);  
144 - });  
145 145
146 return this.axiosInstance.request<T>({ 146 return this.axiosInstance.request<T>({
147 ...config, 147 ...config,