`fix`

package.json

@@ -38,6 +38,7 @@
     "path-browserify": "1.0.1",
     "path-to-regexp": "6.2.0",
     "pinia": "2.0.22",
+    "qiniu-js": "3.4.2",
     "screenfull": "6.0.0",
     "vant": "^4.9.1",
     "vform3-builds": "3.0.8",

src/api/system/oss/index.ts

@@ -34,3 +34,20 @@ export function listArchivesFileList(query: OssQuery): AxiosPromise<OssVO[]> {
     params: query
   });
 }
+
+export function getqiniuToken() {
+  return request({
+    url: '/resource/oss/qiniu/token',
+    method: 'get'
+  });
+}
+
+export function addfile(data: any) {
+  return request({
+    url: '/resource/oss/add',
+    method: 'post',
+    data: data
+  });
+}
+
+

src/components/FileUpload/index.vue

@@ -8,9 +8,10 @@
       :limit="limit"
       :on-error="handleUploadError"
       :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
+
       :show-file-list="true"
       :headers="headers"
+      :http-request="customUpload"
       class="upload-file-uploader"
       ref="fileUploadRef"
       :auto-upload="true"
@@ -56,9 +57,13 @@
 </template>
 
 <script setup lang="ts">
-import { listByIds, delOss } from "@/api/system/oss";
+import { listByIds, delOss,getqiniuToken,addfile } from "@/api/system/oss";
 import { propTypes } from '@/utils/propTypes';
 import { globalHeaders } from "@/utils/request";
+import * as qiniu from 'qiniu-js'
+import {UploadFiles, UploadProgressEvent, UploadRequestOptions} from "element-plus";
+import moment from "moment";
+
 
 const props = defineProps({
     modelValue: [String, Object, Array],
@@ -79,9 +84,44 @@ const emit = defineEmits(['update:modelValue','successupload','addfile']);
 const number = ref(0);
 const uploadList = ref<any[]>([]);
 
+
+// 指定长度和基数
+const  uuid2 = (len: number, radix : number) =>{
+  var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+  var uuid = [],
+    i;
+  radix = radix || chars.length;
+
+  if (len) {
+    // Compact form
+    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
+  } else {
+    // rfc4122, version 4 form
+    var r;
+
+    // rfc4122 requires these characters
+    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
+    uuid[14] = '4';
+
+    // Fill in random data.  At i==19 set the high bits of clock sequence as
+    // per rfc4122, sec. 4.1.5
+    for (i = 0; i < 36; i++) {
+      if (!uuid[i]) {
+        r = 0 | Math.random() * 16;
+        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
+      }
+    }
+  }
+
+  return uuid.join('');
+}
+
+
+
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
 const uploadFileUrl = ref(baseUrl + "/resource/oss/upload"); // 上传文件服务器地址
-const headers = ref(globalHeaders());
+// const headers = ref(globalHeaders());
+const headers = ref({})
 
 const fileList = ref<any[]>([]);
 const showTip = computed(
@@ -115,9 +155,83 @@ watch(() => props.modelValue, async val => {
         return [];
     }
 }, { deep: true, immediate: true });
+const header = ref({});
+const qntoken = ref("");
+
+const getqntoken = ()=>{
+  getqiniuToken().then(res=>{
+    qntoken.value = res.data;
+  })
+}
+onMounted(()=>{
+  getqntoken();
+})
+
+
+
+const customUpload = (options: UploadRequestOptions) =>{
+
+  // 自定义上传方法，使用qiniu-js库进行上传
+  const date = new Date();
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+
+  const directory = moment().format("yyyy/MM/DD/");
+
+  const fileSuffix = (options.file.name.split('.').pop() || '').toLowerCase();
+  const fileName = uuid2(16, 16)  ;
+  const key = directory + fileName+"."+fileSuffix;
+
+  const observable = qiniu.upload(options.file, key,qntoken.value );
+
+  return observable.subscribe({
+    complete(res) {
+      // 上传完成时的回调
+      const imageUrls = res.key;
+      const file_data = {
+        name: fileName+fileSuffix,
+        fileName: imageUrls,
+        url: imageUrls,
+        fileSuffix: fileSuffix,
+        size: options.file.size,
+        originalName: options.file.name
+      }
+      addfile(file_data).then(res=>{
+        uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
+        uploadedSuccessfully();
+      })
+
+      //保存到后端
+      // fileList.value.push(file_data)
+
+      // 将成功状态标记添加到文件对象中。后续测试发现不加也可以，哈哈哈。是之前直接使用this的原因。这里就不去掉了。
+      // const uploadedFileIndex = fileList.value.findIndex(file => file.url === imageUrls);
+      //使用了 findIndex 方法来找到对应文件的索引，然后将状态标记为成功。请尝试修改代码并重新测试上传功能
+      // if (uploadedFileIndex !== -1) {
+      //   console.log(uploadedFileIndex)
+      //   fileList.value[uploadedFileIndex].status = 'success';
+      // }
+
+      // uploadedSuccessfully();
+
+    },
+    next(res) {
+      // 上传过程中的回调，如果需要可以在这里处理上传进度等信息
+      // console.log(options)
+      options.onProgress({percent:res.total.percent})
+      // const progressEvt = evt as UploadProgressEvent
+      // progressEvt.percent = evt.total > 0 ? (evt.loaded / evt.total) * 100 : 0
+      // option.onProgress(progressEvt)
+    },
+    error(err) {
+      // 上传出错时的回调
+    },
+  });
+}
 
 // 上传前校检格式和大小
 const handleBeforeUpload = (file: any) => {
+
     // 校检文件类型
     if (props.fileType.length) {
         const fileName = file.name.split('.');
@@ -154,18 +268,18 @@ const handleUploadError = () => {
 }
 
 // 上传成功回调
-const handleUploadSuccess = (res: any, file: UploadFile) => {
-    if (res.code === 200) {
-        uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
-        uploadedSuccessfully();
-    } else {
-        number.value--;
-        proxy?.$modal.closeLoading();
-        proxy?.$modal.msgError(res.msg);
-        fileUploadRef.value?.handleRemove(file);
-        uploadedSuccessfully();
-    }
-}
+// const handleUploadSuccess = (res: any, file: UploadFile) => {
+//     if (res.code === 200) {
+//         uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
+//         uploadedSuccessfully();
+//     } else {
+//         number.value--;
+//         proxy?.$modal.closeLoading();
+//         proxy?.$modal.msgError(res.msg);
+//         fileUploadRef.value?.handleRemove(file);
+//         uploadedSuccessfully();
+//     }
+// }
 
 // 删除文件
 const handleDelete = (index: number) => {