fix(upload): 点击保存后才开始上传；修复集成form问题

mock/demo/file.js

@@ -0,0 +1,29 @@
+const ResultUtil = require('../_util/resultUtil');
+const Mock = require('mockjs');
+
+module.exports = {
+  'GET /file/upload ': ({ query }) => {
+    const key = 'items|' + query.total;
+    const mock = {};
+    mock[key] = [
+      {
+        id: '@id',
+        'url|1': [
+          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          'https://picsum.photos/id/66/346/216',
+          'https://picsum.photos/id/67/346/216',
+          'https://picsum.photos/id/68/346/216',
+        ],
+        name: Mock.mock('@ctitle(3,10)') + '.png',
+        'status|1': ['success', 'error', 'success'],
+      },
+    ];
+
+    const todoListData = Mock.mock(mock);
+    if (Array.isArray(todoListData.items)) {
+      return ResultUtil.success(todoListData.items);
+    } else {
+      return ResultUtil.success([todoListData.items]);
+    }
+  },
+};

src/api/demo/file.ts

@@ -1,7 +1,8 @@
 import http from '@/utils/http/axios';
-
+import { UploadResult, UploadParams } from './model/fileModel';
 enum Api {
   DEMO_LIST = 'http://entropymine.com/jason/testbed/mime/oct2/file.txt',
+  UploadFile = '/file/upload',
 }
 
 /**
@@ -16,3 +17,23 @@ export function downloadApi() {
     { apiUrl: '', joinPrefix: false }
   );
 }
+
+/**
+ * @description: 上传
+ */
+export function uploadApi(params: UploadParams) {
+  console.log(params);
+
+  return http.request<UploadResult[]>(
+    {
+      url: Api.UploadFile,
+      method: 'GET',
+      params,
+      headers: { 'Content-Type': 'multipart/form-data' },
+    },
+    {
+      // 登陆接口不加 /v1.0
+      joinPrefix: false,
+    }
+  );
+}

src/api/demo/model/fileModel.ts

@@ -0,0 +1,11 @@
+export interface UploadResult {
+  id: string;
+  name: string;
+  status: string;
+  url: string;
+}
+
+export interface UploadParams {
+  formData: FormData;
+  total: number;
+}

src/components/file/src/UploadContainer.vue

@@ -1,5 +1,5 @@
 <script lang="tsx">
-  import { defineComponent, unref, reactive } from 'compatible-vue';
+  import { defineComponent, unref, reactive, watch } from 'compatible-vue';
 
   // import { UploadFile } from 'ant-design-vue/types/upload';
 
@@ -14,7 +14,7 @@
   export default defineComponent({
     name: 'UploadContainer',
     props: uploadContainerProps,
-    setup(props: UploadContainerProps, { emit }) {
+    setup(props: UploadContainerProps, { emit, attrs }) {
       const state = reactive<{ fileList: Array<UploadResult> }>({
         fileList: [],
       });
@@ -23,17 +23,37 @@
 
       // 上传完成
       function handleChange(fileList: UploadResult[]) {
-        if (fileList) {
-          state.fileList = fileList;
+        if (fileList && fileList.length > 0) {
+          state.fileList = [...state.fileList, ...fileList];
         }
         emit('change', state.fileList);
         openModal({
           visible: false,
         });
       }
+      // 预览modal
+      function handlePreviewChange(fileList: UploadResult[] = []) {
+        // console.log(fileList);
+        // if (fileList && fileList.length > 0) {
+        state.fileList = [...fileList];
+        // }
+        emit('change', state.fileList);
+        openModalPv({
+          visible: false,
+        });
+      }
+      watch(
+        () => props.value,
+        (value) => {
+          if (value && value.length > 0) {
+            state.fileList = [...value];
+          }
+        },
+        { immediate: true }
+      );
 
       return () => (
-        <div class="m-4">
+        <div {...attrs}>
           <a-button-group>
             <a-button
               onClick={() => {
@@ -59,9 +79,10 @@
           )}
           {!unref(isFirstLoadRefPv) && (
             <UploadPreviewModal
-              uploadImg={props.uploadImg}
-              priviewList={[...state.fileList, ...props.priviewList]}
+              isUploadImg={props.isUploadImg}
+              priviewList={state.fileList}
               onRegister={registerPv}
+              onChange={handlePreviewChange}
             />
           )}
         </div>