我的页面

pages/common/file/fileUpload/index2.vue

@@ -0,0 +1,208 @@
+<template>
+  <view>
+    <up-upload
+      :accept="fileTypeInfo"
+      :maxCount="limit"
+      :fileList="fileList1"
+      @afterRead="afterRead"
+      @delete="deletePic"
+      :maxSize="fileSize"
+      name="fileInfowx"
+      multiple
+      :previewFullImage="true"
+    >
+    <image :src="tu2x" 
+	 style="width: 210rpx;height: 210rpx;"></image>
+  </up-upload>
+  </view>
+</template>
+
+<script setup>
+import { getQNtoken, addFileList } from "@/api/qiniu/info";
+import config1 from "@/config";
+import { ref, reactive, getCurrentInstance, defineEmits } from 'vue';
+import { useStore } from 'vuex';
+import * as qiniu from 'qiniu-js'
+
+const emit = defineEmits();
+const { proxy } = getCurrentInstance();
+const uploadQiNiuDomain = config1.uploadQiNiuDomain;
+const iconConfig = proxy.iconConfig;
+const tu2x = iconConfig.tu2x;
+const props = defineProps({
+  modelValue: [String, Object, Array],
+  fileTypeInfo: {
+    type: String,
+    default: "image",
+  },
+  limit: {
+    type: Number,
+    default: 6,
+  },
+  fileSize: {
+    type: Number,
+    default: 100 * 1024 * 1024,
+  }
+});
+
+const url = ref('');
+const fileList1 = ref([]);
+const store = useStore();
+const dataToken = reactive({
+  token: '',
+  key: ''
+});
+const fileInfo = reactive({
+  name: '',
+  type: '',
+  extension: ''
+});
+const config = reactive({
+  useCdnDomain: true,
+  region: qiniu.region.z2,
+  checkByMD5: true,
+  forceDirect: false
+});
+const putExtra = reactive({});
+const form = reactive({
+  id: null,
+  configId: null,
+  name: null,
+  path: null,
+  url: null,
+  type: null,
+  fileCategory: null,
+  size: null,
+  creator: null,
+  createTime: null,
+  updater: null,
+  updateTime: null,
+  deleted: null
+});
+
+// 新增图片
+const afterRead = async (event) => {
+  
+  let name = event.name;
+  let lists = [].concat(event.file);
+  let fileListLen = fileList1.value.length;
+  lists.forEach(item => {
+    fileList1.value.push({
+      ...item,
+      status: 'uploading',
+      message: '上传中',
+    });
+  });
+  for (let i = 0; i < lists.length; i++) {
+    try {
+      const result = await uploadFilePromise(lists[i], name);
+      let item = fileList1.value[fileListLen];
+      fileList1.value.splice(fileListLen, 1, {
+        ...item,
+        status: 'success',
+        message: '',
+        url: store.state.user.QNDomain + result,
+        furl: result
+      });
+      emit("update:modelValue", listToString(fileList1.value));
+      fileListLen++;
+    } catch (error) {
+      console.error("上传失败:", error);
+    }
+  }
+};
+
+const uploadFilePromise = async (fileInfo1, name) => {
+  
+  // 主要目的的拼名字，大小，类型
+  let fileNameOld = [0, 1];
+  if (fileInfo1.name !== undefined) {
+    fileNameOld = fileInfo1.name.split('.');
+  }
+
+  fileInfo.name = fileNameOld[0] + "_" + store.state.user.phoneType + "_" + name;
+  
+  let extension1 = fileInfo1.url.split('.');
+  
+  // 防止 h5 报错
+  if (extension1[1] === undefined) {
+    extension1[1] = fileNameOld[fileNameOld.length-1]; //保证取最后一个
+  }
+  //主要是为了拼接文件type（video/mp4），因为各端传入的type各有不同
+  fileInfo.type = fileInfo1.type + "/" + extension1[extension1.length-1];
+  
+  fileInfo.extension = extension1[1];
+  try {
+    const tokenData = await getQNtoken(fileInfo);
+    dataToken.token = tokenData.QNtoken;
+    dataToken.key = tokenData.key;
+
+    const result = await uploadQN(fileInfo1);
+    return result;
+  } catch (error) {
+    console.error("获取 token 或上传失败:", error);
+    throw error;
+  }
+};
+//多走一步，为了实现文件分片上传（废弃，简单上传即可）
+const uploadQN = (file) => {
+  return uploadQN1(file.url);
+};
+
+//调用uni上传方法
+const uploadQN1 = (file) => {
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url: uploadQiNiuDomain,
+      filePath: file,
+      name: 'file',
+      formData: {
+        'key': dataToken.key,
+        'token': dataToken.token
+      },
+      success: async (e) => {
+        try {
+          let data = JSON.parse(e.data);
+          form.url = data.key;
+          form.name = data.key;
+          form.type = data.fileType;
+          form.size = data.fsize;
+          await addFileList(form);
+          resolve(form.url);
+        } catch (error) {
+          console.error("处理上传成功响应时出错:", error);
+          reject(error);
+        }
+      },
+      fail: (e) => {
+        console.log("上传失败:", e);
+        reject(e);
+      }
+    });
+  });
+};
+
+const deletePic = (e) => {
+  fileList1.value.splice(e.index, 1);
+};
+
+const typeInfo = () => {
+  store.dispatch('getPhoneType');
+  
+};
+  // 对象转成指定字符串分隔
+  function listToString(list, separator) {
+    let strs = "";
+    separator = separator || ",";
+    for (let i in list) {
+      if (list[i].url) {
+        strs += list[i].furl + separator;
+      }
+    }
+    return strs != '' ? strs.substr(0, strs.length - 1) : '';
+  }
+typeInfo();
+</script>
+
+<style lang="scss" scoped>
+</style>

utils/dict.js

@@ -0,0 +1,13 @@
+
+import { ref } from 'vue'
+
+import store from '@/store'
+import { getDicts } from "@/api/system/dict/data"
+const sex_dict = ref([])
+
+export const getDictLabelByValue = (dictInfo, state) => {
+    return getDicts(dictInfo).then(e => {
+      const dict = e.data.find((dict) => dict.dictValue === state);
+      return dict ? dict : '未知状态';
+    });
+  };