更新修改上传

src/components/layout/layoutTop.tsx

@@ -60,6 +60,7 @@ export default defineComponent({
 
     onMounted(() => {
       window.addEventListener('message', onImMessage);
+      showImGroupLoading.value = true;
       showImGroup.value = true;
 
       nextTick(() => {

src/components/layout/modals/suggestion-option.tsx

@@ -10,7 +10,8 @@ import {
   useMessage,
   NUpload,
   UploadFileInfo,
-  NImage
+  NImage,
+  UploadCustomRequestOptions
 } from 'naive-ui';
 
 import { useUserStore } from '/src/store/modules/users';
@@ -22,19 +23,20 @@ import suggestClose from '../images/suggestClose.png';
 import inFront from '../images/inFront.png';
 import inBack from '../images/inBack.png';
 import submitBtn from '../images/submitBtn.png';
-import sealing from '../images/sealing.png'
-import boxBg from '../images/boxBg.png'
+import sealing from '../images/sealing.png';
+import boxBg from '../images/boxBg.png';
 import {
   addSuggestion,
   getSuggestionList,
   sysParamConfigPage
 } from '../modals/api';
 import { nextTick } from 'process';
+import { getUploadSign, onFileUpload } from '/src/helpers/oss-file-upload';
 
 export default defineComponent({
   name: 'train-update',
   emits: ['close', 'submit'],
-  setup(props, { emit,expose }) {
+  setup(props, { emit, expose }) {
     const message = useMessage();
     const userStore = useUserStore();
     const forms = reactive({
@@ -46,7 +48,7 @@ export default defineComponent({
       mobileNo: userStore.getUserInfo.phone
     });
     const state = reactive([]) as any;
-    const isubmit = ref(false)
+    const isubmit = ref(false);
 
     const suggestionTypeList = ref([] as any);
     const ossUploadUrl = `https://gyt.ks3-cn-beijing.ksyuncs.com/`;
@@ -57,8 +59,8 @@ export default defineComponent({
     const tempFiileBuffer = ref();
     const email = ref('');
     const phone = ref('');
-    const isLoading = ref(false)
-    const ishidden= ref(false)
+    const isLoading = ref(false);
+    const ishidden = ref(false);
     const onSubmit = async () => {
       // if (!forms.suggestionTypeId) {
       //   message.error('请选择反馈类型');
@@ -85,31 +87,29 @@ export default defineComponent({
           const res = await addSuggestion({ ...forms, attachmentUrls });
           isubmit.value = true;
           // message.success('提交成功');
-          setTimeout(()=>{
-            onReset()
-            ishidden.value = true
-            emit('close')
-          },3000)
-
+          setTimeout(() => {
+            onReset();
+            ishidden.value = true;
+            emit('close');
+          }, 3000);
         } catch (e) {
           console.log(e);
         }
         console.log('onSubmit');
-      })
-
+      });
     };
-    const onReset = ()=>{
-      ishidden.value = false
-      isubmit.value = false
-      forms.suggestionTypeId=null
-      forms.clientType='TEACHER'
-      forms.content= ''
-      forms.attachmentUrls= ''
+    const onReset = () => {
+      ishidden.value = false;
+      isubmit.value = false;
+      forms.suggestionTypeId = null;
+      forms.clientType = 'TEACHER';
+      forms.content = '';
+      forms.attachmentUrls = '';
       fileListRef.value = [];
-      forms.type= 'APP'
-      forms.mobileNo= userStore.getUserInfo.phone
-    }
-    expose({onReset})
+      forms.type = 'APP';
+      forms.mobileNo = userStore.getUserInfo.phone;
+    };
+    expose({ onReset });
     const onBeforeUpload = async (options: any) => {
       console.log(options, 'onBeforeUpload');
       const file = options.file;
@@ -143,7 +143,8 @@ export default defineComponent({
             unknowValueField: []
           }
         };
-        const { data } = await policy(obj);
+        // const { data } = await policy(obj);
+        const { data } = await getUploadSign(obj);
         state.push({
           id: file.id,
           tempFiileBuffer: file.file,
@@ -162,6 +163,23 @@ export default defineComponent({
       }
       return true;
     };
+    const onCustomRequest = ({
+      file,
+      // data,
+      // headers,
+      // withCredentials,
+      action,
+      onFinish,
+      onError,
+      onProgress
+    }: UploadCustomRequestOptions) => {
+      const item = state.find((c: any) => {
+        return c.id == file.id;
+      });
+
+      item.file = file;
+      onFileUpload({ file, action, data: item, onProgress, onFinish, onError });
+    };
     const onFinish = (options: any) => {
       // const url =
       const name = options.file.name;
@@ -185,8 +203,6 @@ export default defineComponent({
       }
     };
 
-
-
     const getPhoneInfo = async () => {
       try {
         const { data } = await sysParamConfigPage({
@@ -209,117 +225,127 @@ export default defineComponent({
       }
     };
 
-    const imglist = [inFront,inBack,submitBtn,sealing,boxBg]
-    const loadImg = (imgList:any) => {
+    const imglist = [inFront, inBack, submitBtn, sealing, boxBg];
+    const loadImg = (imgList: any) => {
       for (let i = 0; i < imgList.length; i++) {
-        const img = new Image()
+        const img = new Image();
         // let currentSrc = ''
-        img.src = imgList[i]
+        img.src = imgList[i];
         img.onload = function (e) {
-          console.log('加载完毕', e,img.complete );
-        }
+          console.log('加载完毕', e, img.complete);
+        };
         img.onerror = function (e) {
           console.log('加载错误', e);
-        }
+        };
       }
-    }
-    loadImg(imglist)
+    };
+    loadImg(imglist);
     onMounted(() => {
       getTypeList();
       getPhoneInfo();
     });
     return () => (
       <div class={[styles.suggestOption]}>
-      <div class={[styles.updatePassword,isubmit.value?styles.isAni:'',ishidden.value?styles.isend:null]}>
-        <div class={[styles.formWrap,isubmit.value?styles.isAni:'']}>
-          <NImage
-            class={styles.closeBtn}
-            src={suggestClose}
-            previewDisabled   onClick={() => {onReset();emit('close')}}></NImage>
-          <NImage class={styles.bgLine} src={bgLine} previewDisabled></NImage>
-          <h2 class={styles.formTitle}>意见反馈</h2>
-          <div class={styles.formWrapInfo}>
-            <NForm
-              labelAlign="right"
-              labelPlacement="left"
-              labelWidth={'auto'}
-              ref={formsRef}
-              model={forms}
-              requireMarkPlacement="left">
-              {/* <NFormItem
+        <div
+          class={[
+            styles.updatePassword,
+            isubmit.value ? styles.isAni : '',
+            ishidden.value ? styles.isend : null
+          ]}>
+          <div class={[styles.formWrap, isubmit.value ? styles.isAni : '']}>
+            <NImage
+              class={styles.closeBtn}
+              src={suggestClose}
+              previewDisabled
+              onClick={() => {
+                onReset();
+                emit('close');
+              }}></NImage>
+            <NImage class={styles.bgLine} src={bgLine} previewDisabled></NImage>
+            <h2 class={styles.formTitle}>意见反馈</h2>
+            <div class={styles.formWrapInfo}>
+              <NForm
+                labelAlign="right"
+                labelPlacement="left"
+                labelWidth={'auto'}
+                ref={formsRef}
+                model={forms}
+                requireMarkPlacement="left">
+                {/* <NFormItem
             path="currentClass"
             label=""
             class={styles.phoneContainer}>
             <p class={styles.phone}>{forms.mobile}</p>
           </NFormItem> */}
 
-              <NFormItem
-                rule={[
-                  {
-                    required: true,
-                    message: '请选择反馈类型'
-                  }
-                ]}
-                path="suggestionTypeId">
-                <CSelect
-                  class={styles.suggestSelect}
-                  value-field="id"
-                  label-field="name"
-                  style={{ width: '227px!important' }}
-                  {...({
-                    options: suggestionTypeList.value,
-                    placeholder: '反馈类型(必选)',
-                    clearable: true,
-                    inline: true
-                  } as any)}
-                  v-model:value={forms.suggestionTypeId}></CSelect>
-              </NFormItem>
-              <NFormItem
-                path="content"
-                rule={[
-                  {
-                    required: true,
-                    message: '请输入反馈内容'
-                  }
-                ]}>
-                <NInput
-                  class={styles.countInput}
-                  type="textarea"
-                  rows={5}
-                  placeholder={'请输入反馈内容'}
-                  maxlength={200}
-                  resizable={false}
-                  showCount
-                  v-model:value={forms.content}></NInput>
-              </NFormItem>
-              <NFormItem>
-                <NUpload
-                  list-type="image-card"
-                  accept=".jpg,jpeg,.png"
-                  v-model:fileList={fileListRef.value}
-                  ref={uploadRef}
-                  multiple={true}
-                  max={5}
-                  data={(file: any) => {
-                    const item = state.find((c: any) => {
-                      return c.id == file.file.id;
-                    });
-                    const { id, tempFiileBuffer, ...more } = item;
-                    return { ...more };
-                  }}
-                  showPreviewButton
-                  action={ossUploadUrl}
-                  onBeforeUpload={(options: any) => onBeforeUpload(options)}
-                  onRemove={(options: any) => onRemove(options)}
-                  onFinish={(options: any) => onFinish(options)}>
-                  <div class={styles.addInput}>
-                    <NImage previewDisabled src={chioseAdd}></NImage>
-                    <p> 点击上传图片</p>
-                    <p>(最多五张)</p>
-                  </div>
-                </NUpload>
-              </NFormItem>
-              {/* {phone.value || email.value ? (
+                <NFormItem
+                  rule={[
+                    {
+                      required: true,
+                      message: '请选择反馈类型'
+                    }
+                  ]}
+                  path="suggestionTypeId">
+                  <CSelect
+                    class={styles.suggestSelect}
+                    value-field="id"
+                    label-field="name"
+                    style={{ width: '227px!important' }}
+                    {...({
+                      options: suggestionTypeList.value,
+                      placeholder: '反馈类型(必选)',
+                      clearable: true,
+                      inline: true
+                    } as any)}
+                    v-model:value={forms.suggestionTypeId}></CSelect>
+                </NFormItem>
+                <NFormItem
+                  path="content"
+                  rule={[
+                    {
+                      required: true,
+                      message: '请输入反馈内容'
+                    }
+                  ]}>
+                  <NInput
+                    class={styles.countInput}
+                    type="textarea"
+                    rows={5}
+                    placeholder={'请输入反馈内容'}
+                    maxlength={200}
+                    resizable={false}
+                    showCount
+                    v-model:value={forms.content}></NInput>
+                </NFormItem>
+                <NFormItem>
+                  <NUpload
+                    list-type="image-card"
+                    accept=".jpg,jpeg,.png"
+                    v-model:fileList={fileListRef.value}
+                    ref={uploadRef}
+                    multiple={true}
+                    max={5}
+                    // data={(file: any) => {
+                    //   const item = state.find((c: any) => {
+                    //     return c.id == file.file.id;
+                    //   });
+                    //   const { id, tempFiileBuffer, ...more } = item;
+                    //   return { ...more };
+                    // }}
+                    showPreviewButton
+                    action={ossUploadUrl}
+                    customRequest={onCustomRequest}
+                    onBeforeUpload={(options: any) => onBeforeUpload(options)}
+                    onRemove={(options: any) => onRemove(options)}
+                    onFinish={(options: any) => onFinish(options)}>
+                    <div class={styles.addInput}>
+                      <NImage previewDisabled src={chioseAdd}></NImage>
+                      <p> 点击上传图片</p>
+                      <p>(最多五张)</p>
+                    </div>
+                  </NUpload>
+                </NFormItem>
+                {/* {phone.value || email.value ? (
                 <NFormItem>
                   <div class={styles.messageWrap}>
                     {phone.value ? <p>客服电话：{phone.value}</p> : null}
@@ -328,7 +354,7 @@ export default defineComponent({
                 </NFormItem>
               ) : null} */}
 
-              {/* <NSpace class={styles.updateBtnGroup}>
+                {/* <NSpace class={styles.updateBtnGroup}>
                 <NButton
                   strong
                   type="default"
@@ -340,26 +366,36 @@ export default defineComponent({
                   确认
                 </NButton>
               </NSpace> */}
-            </NForm>
+              </NForm>
+            </div>
           </div>
+          <div class={[styles.inBack, isubmit.value ? styles.isAni : '']}></div>
+          {/* <div class={styles.inBackBottom}></div>  boxBg */}
+          <NImage
+            src={boxBg}
+            class={styles.inBackBottom}
+            previewDisabled></NImage>
+          <NImage src={inFront} class={styles.inFront} previewDisabled></NImage>
+          <NImage
+            src={sealing}
+            class={[styles.sealing, isubmit.value ? styles.isAni : '']}
+            previewDisabled></NImage>
+          {!isubmit.value ? (
+            <>
+              <NImage
+                src={submitBtn}
+                onClick={() => {
+                  onSubmit();
+                }}
+                class={styles.submitBtn}
+                previewDisabled></NImage>
+              <div class={styles.messageWrap}>
+                {phone.value ? <p>客服电话：{phone.value}</p> : null}
+                {email.value ? <p>邮箱：{email.value}</p> : null}
+              </div>
+            </>
+          ) : null}
         </div>
-        <div class={[styles.inBack,isubmit.value?styles.isAni:'']}>
-
-        </div>
-        {/* <div class={styles.inBackBottom}></div>  boxBg */}
-        <NImage src={boxBg} class={styles.inBackBottom} previewDisabled></NImage>
-        <NImage src={inFront} class={styles.inFront} previewDisabled></NImage>
-        <NImage src={sealing} class={[styles.sealing,isubmit.value?styles.isAni:'']} previewDisabled></NImage>
-        {!isubmit.value?<>
-          <NImage src={submitBtn}  onClick={()=>{onSubmit()}} class={styles.submitBtn} previewDisabled></NImage>
-          <div class={styles.messageWrap}>
-          {phone.value ? <p>客服电话：{phone.value}</p> : null}
-          {email.value ? <p>邮箱：{email.value}</p> : null}
-        </div>
-        </>:null}
-
-      </div>
-
       </div>
     );
   }

src/components/upload-file/index.tsx

@@ -1,8 +1,16 @@
-import { NButton, NModal, NUpload, UploadFileInfo, useMessage } from 'naive-ui';
+import {
+  NButton,
+  NModal,
+  NUpload,
+  UploadCustomRequestOptions,
+  UploadFileInfo,
+  useMessage
+} from 'naive-ui';
 import { defineComponent, watch, PropType, reactive, ref } from 'vue';
 import { policy } from './api';
 import Copper from './copper';
 import axios from 'axios';
+import { getUploadSign, onFileUpload } from '/src/helpers/oss-file-upload';
 
 export default defineComponent({
   name: 'upload-file',
@@ -112,14 +120,15 @@ export default defineComponent({
     const btnLoading = ref<boolean>(false);
     const tempFiileBuffer = ref();
     const uploadRef = ref();
-    const state = reactive({
-      policy: '',
-      signature: '',
-      key: '',
-      KSSAccessKeyId: '',
-      acl: 'public-read',
-      name: ''
-    }) as any;
+    // const state = reactive({
+    //   policy: '',
+    //   signature: '',
+    //   key: '',
+    //   KSSAccessKeyId: '',
+    //   acl: 'public-read',
+    //   name: ''
+    // }) as any;
+    const state = reactive([]) as any;
 
     const fileListRef = ref<UploadFileInfo[]>([]);
     const initFileList = () => {
@@ -222,15 +231,26 @@ export default defineComponent({
             unknowValueField: []
           }
         };
-        const { data } = await policy(obj);
+        // const { data } = await policy(obj);
 
-        state.policy = data.policy;
-        state.signature = data.signature;
-        state.key = fileName;
-        state.KSSAccessKeyId = data.kssAccessKeyId;
-        state.name = fileName;
+        // state.policy = data.policy;
+        // state.signature = data.signature;
+        // state.key = fileName;
+        // state.KSSAccessKeyId = data.kssAccessKeyId;
+        // state.name = fileName;
 
-        tempFiileBuffer.value = file.file;
+        // tempFiileBuffer.value = file.file;
+        const { data } = await getUploadSign(obj);
+        state.push({
+          id: file.id,
+          tempFiileBuffer: file.file,
+          policy: data.policy,
+          signature: data.signature,
+          acl: 'public-read',
+          key: fileName,
+          KSSAccessKeyId: data.kssAccessKeyId,
+          name: fileName
+        });
       } catch {
         //
         // message.error('上传失败')
@@ -245,11 +265,11 @@ export default defineComponent({
       reader.readAsDataURL(img);
     };
     const onFinish = (options: any) => {
-      const url = ossUploadUrl + state.key;
-      console.log(url, 'url');
-      emit('update:fileList', url);
-      emit('readFileInputEventAsArrayBuffer', tempFiileBuffer.value);
-      options.file.url = url;
+      const item = state.find((c: any) => c.id == options.file.id);
+      // const url = ossUploadUrl + state.key;
+      emit('update:fileList', options.file.url);
+      emit('readFileInputEventAsArrayBuffer', item.tempFiileBuffer);
+      // options.file.url = url;
       visiable.value = false;
       btnLoading.value = false;
     };
@@ -260,6 +280,24 @@ export default defineComponent({
       btnLoading.value = false;
     };
 
+    const onCustomRequest = ({
+      file,
+      // data,
+      // headers,
+      // withCredentials,
+      action,
+      onFinish,
+      onError,
+      onProgress
+    }: UploadCustomRequestOptions) => {
+      const item = state.find((c: any) => {
+        return c.id == file.id;
+      });
+
+      item.file = file;
+      onFileUpload({ file, action, data: item, onProgress, onFinish, onError });
+    };
+
     // 裁切失败
     // const cropperNo = () => {}
     // 裁切成功
@@ -319,7 +357,8 @@ export default defineComponent({
         <NUpload
           ref={uploadRef}
           action={ossUploadUrl}
-          data={state}
+          // data={state}
+          customRequest={onCustomRequest}
           v-model:fileList={fileListRef.value}
           listType={props.listType}
           accept={props.accept}

src/helpers/oss-file-upload.ts

@@ -26,19 +26,16 @@ const tencentBucket = 'daya-online-1303457149';
  * @param oss 服务商 ks3 tencent
  * @returns ”{'signatur'':'',''kssAccessKeyI'':'',''policy': '' }“
  */
-export const getUploadSign = async (params: any, oss?: string) => {
-  console.log(params, 'params');
+export const getUploadSign = async (params: any) => {
   const { bucketName, filename, postData } = params;
-  const ossType = oss || ossSwitch;
+  const ossType = ossSwitch;
   let bucket = bucketName;
   let file = filename;
-  const key = postData.key;
+  // const key = postData.key;
   let tempPostData: any = {};
-  console.log(postData, '`');
   if (ossType === 'tencent') {
     bucket = tencentBucket;
     file = 'ktqy/' + filename;
-    // key = 'ktqy/' + ;
 
     tempPostData = {
       key: 'ktqy/' + postData.key
@@ -57,15 +54,18 @@ export const getUploadSign = async (params: any, oss?: string) => {
   });
 };
 
+/**
+ * 使用组件上传时，调用方法
+ * @param param0
+ */
 export const onFileUpload = ({
+  file,
   action,
   data,
   onProgress,
   onFinish,
   onError
 }: any) => {
-  console.log(data, 'data');
-
   if (ossSwitch === 'ks3') {
     const fileParams = {
       policy: data.policy,
@@ -87,24 +87,20 @@ export const onFileUpload = ({
           onProgress({ percent: Math.ceil((progress || 0) * 100) });
         }
       })
-      .then((res: any) => {
-        console.log(res, 'res');
+      .then(() => {
+        file.url = action + data.key;
         onFinish();
       })
       .catch(error => {
-        console.log(error, 'error');
-        onError();
+        onError(error);
       });
   } else {
     const cos = new COS({
       // getAuthorization 必选参数
       getAuthorization: async (options, callback: any) => {
-        // console.log(options, { Authorization: data.signature });
         callback({ Authorization: data.signature });
       }
     });
-
-    console.log(data.file, 'data.file', `ktqy/${data.name}`);
     cos
       .uploadFile({
         Bucket: tencentBucket /* 填写自己的 bucket，必须字段 */,
@@ -115,14 +111,14 @@ export const onFileUpload = ({
         SliceSize:
           1024 *
           1024 *
-          5 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
+          500 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
         onProgress: function (progressData) {
-          console.log(JSON.stringify(progressData));
+          onProgress({ percent: Math.ceil((progressData.percent || 0) * 100) });
         }
       })
       .then((res: any) => {
-        console.log(res, 'res');
-        onFinish(res);
+        file.url = 'https://' + res.Location;
+        onFinish();
       })
       .catch(error => {
         console.log(error, 'error');
@@ -131,25 +127,70 @@ export const onFileUpload = ({
   }
 };
 
-// cos.uploadFile(
-//   {
-//     Bucket: 'daya-online-1303457149' /* 填写自己的 bucket，必须字段 */,
-//     Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
-//     Key: 'gyt/1.jpg' /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */,
-//     Body: file, // 上传文件对象
-//     SliceSize:
-//       1024 *
-//       1024 *
-//       5 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
-//     onProgress: function (progressData) {
-//       console.log(JSON.stringify(progressData));
-//     }
-//   },
-//   function (err, data) {
-//     if (err) {
-//       console.log('上传失败', err);
-//     } else {
-//       console.log('上传成功');
-//     }
-//   }
-// );
+export const onOnlyFileUpload = async (action: string, params: any) => {
+  if (ossSwitch === 'ks3') {
+    const fileParams = {
+      policy: params.policy,
+      signature: params.signature,
+      key: params.key,
+      acl: 'public-read',
+      KSSAccessKeyId: params.KSSAccessKeyId,
+      name: params.name
+    } as any;
+    const formData = new FormData();
+    for (const key in fileParams) {
+      formData.append(key, fileParams[key]);
+    }
+    formData.append('file', params.file as File);
+    let file = '';
+    await axios
+      .post(action as string, formData, {
+        // onUploadProgress: ({ progress }) => {
+        //   console.log(progress);
+        //   onProgress({ percent: Math.ceil((progress || 0) * 100) });
+        // }
+      })
+      .then(() => {
+        file = action + params.key;
+      })
+      .catch(error => {
+        // onError(error);
+        throw new Error(error);
+      });
+    return file;
+  } else {
+    let file = '';
+    const cos = new COS({
+      // getAuthorization 必选参数
+      getAuthorization: async (options, callback: any) => {
+        callback({ Authorization: params.signature });
+      }
+    });
+    await cos
+      .uploadFile({
+        Bucket: tencentBucket /* 填写自己的 bucket，必须字段 */,
+        Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
+        Key: `ktqy/${params.name}`,
+        /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
+        Body: params.file, // 上传文件对象
+        SliceSize:
+          1024 *
+          1024 *
+          500 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
+        // onProgress: function (progressData) {
+        //   onProgress({ percent: Math.ceil((progressData.percent || 0) * 100) });
+        // }
+      })
+      .then((res: any) => {
+        // file.url = 'https://' + res.Location;
+        file = 'https://' + res.Location;
+        // onFinish();
+      })
+      .catch(error => {
+        // console.log(error, 'error');
+        // onError();
+        throw new Error(error);
+      });
+    return file;
+  }
+};

src/views/natural-resources/components/my-resources/save-modal/index.tsx

@@ -17,6 +17,7 @@ import axios from 'axios';
 import {
   getUploadSign,
   onFileUpload,
+  onOnlyFileUpload,
   ossSwitch
 } from '/src/helpers/oss-file-upload';
 
@@ -151,7 +152,6 @@ export default defineComponent({
         };
         // const { data } = await policy(obj);
         const { data } = await getUploadSign(obj);
-        console.log(data);
         state.push({
           id: file.id,
           tempFiileBuffer: file.file,
@@ -162,8 +162,6 @@ export default defineComponent({
           KSSAccessKeyId: data.kssAccessKeyId,
           name: fileName
         });
-
-        // tempFiileBuffer.value = file.file;
       } catch {
         //
         // message.error('上传失败')
@@ -172,48 +170,38 @@ export default defineComponent({
       }
       return true;
     };
-    const getBase64 = async (img: any, callback: any) => {
-      const reader = new FileReader();
-      reader.addEventListener('load', () => callback(reader.result));
-      reader.readAsDataURL(img);
-    };
+    // const getBase64 = async (img: any, callback: any) => {
+    //   const reader = new FileReader();
+    //   reader.addEventListener('load', () => callback(reader.result));
+    //   reader.readAsDataURL(img);
+    // };
 
     const onFinish = (options: any) => {
-      // console.log(options, 'onFinish');
       onFinishAfter(options);
     };
     const onFinishAfter = async (options: any) => {
       console.log(options, 'onFinishAfter');
       const item = state.find((c: any) => c.id == options.file.id);
-      const url = ossUploadUrl + item.key;
-      const type = formatUrlType(url);
+      const type = formatUrlType(options.file.url);
       let coverImg = '';
       if (type === 'IMG') {
-        coverImg = url;
+        coverImg = options.file.url;
       } else if (type === 'SONG') {
         coverImg = PageEnum.SONG_DEFAULT_COVER;
       } else if (type === 'VIDEO') {
         // 获取视频封面图
         coverImg = await getVideoCoverImg(item.tempFiileBuffer);
       }
-      // emit('update:fileList', url);
-      // emit('readFileInputEventAsArrayBuffer', item.tempFiileBuffer);
-      // console.log(url, 'url onFinishAfter');
-      // emit('finished', {
-      //   coverImg,
-      //   content: url
-      // });
 
       uploadList.value.push({
         coverImg,
-        content: url,
+        content: options.file.url,
         id: options.file.id,
         name: options.file.name
           ? options.file.name.slice(0, options.file.name.lastIndexOf('.'))
           : ''
       });
 
-      options.file.url = url;
       visiable.value = false;
       btnLoading.value = false;
     };
@@ -255,7 +243,7 @@ export default defineComponent({
             unknowValueField: []
           }
         };
-        const { data } = await policy(obj);
+        const { data } = await getUploadSign(obj);
 
         const fileParams = {
           policy: data.policy,
@@ -263,18 +251,12 @@ export default defineComponent({
           key: fileName,
           acl: 'public-read',
           KSSAccessKeyId: data.kssAccessKeyId,
-          name: fileName
+          name: fileName,
+          file: imgBlob
         } as any;
-        const formData = new FormData();
-        for (const key in fileParams) {
-          formData.append(key, fileParams[key]);
-        }
-
-        formData.append('file', imgBlob);
-        await axios.post(ossUploadUrl, formData);
+        const res = await onOnlyFileUpload(ossUploadUrl, fileParams);
 
-        const url = ossUploadUrl + fileName;
-        return url;
+        return res;
       } finally {
         btnLoading.value = false;
       }
@@ -301,9 +283,9 @@ export default defineComponent({
 
     const onCustomRequest = ({
       file,
-      data,
-      headers,
-      withCredentials,
+      // data,
+      // headers,
+      // withCredentials,
       action,
       onFinish,
       onError,
@@ -314,7 +296,7 @@ export default defineComponent({
       });
 
       item.file = file;
-      onFileUpload({ action, data: item, onProgress, onFinish, onError });
+      onFileUpload({ file, action, data: item, onProgress, onFinish, onError });
     };
 
     const onSubmit = async () => {

src/views/natural-resources/components/my-resources/upload-modal/index.tsx

@@ -32,9 +32,10 @@ import { scrollToErrorForm } from '/src/utils';
 
 // 判断链接后辍
 export const formatUrlType = (url: string) => {
-  if (url.indexOf('.mp3') > -1) {
+  if (!url) return '';
+  if (url?.indexOf('.mp3') > -1) {
     return NaturalTypeEnum.SONG;
-  } else if (url.indexOf('.mp4') > -1) {
+  } else if (url?.indexOf('.mp4') > -1) {
     return NaturalTypeEnum.VIDEO;
   } else {
     return NaturalTypeEnum.IMG;