talk_appAmin/pages/common/file/fileUpload/index.vue

<template>
  <!-- 默认上传样式 -->
    <up-upload
      :accept="fileTypeInfo"
      :maxCount="limit"
      :fileList="fileList1"
      @afterRead="afterRead"
      @delete="deletePic"
      :maxSize="fileSize"
      name="fileInfowx"
      multiple
      :previewFullImage="true"
      :width="pwidth"
      :height="pheight"
    >
      <slot name="default-image">
        <image :src="tu2x" style="width: 210rpx; height: 210rpx;" ></image>
      </slot>
    </up-upload>


</template>

<script setup>
import { getQNtoken, addFileList } from "@/api/qiniu/info";
import config1 from "@/config";
import { ref, reactive, getCurrentInstance, defineEmits,watch } from 'vue';
import { useStore } from 'vuex';
import * as qiniu from 'qiniu-js'

const fileList1 = ref([])
const emit = defineEmits();
const { proxy } = getCurrentInstance();
const uploadQiNiuDomain = config1.uploadQiNiuDomain;
const iconConfig = proxy.iconConfig;

const tu2x = iconConfig.tu2x;
const store = useStore();

const props = defineProps({
  modelValue: [String, Object, Array],
  fileTypeInfo: {
    type: String,
    default: "image",
  },
  limit: {
    type: Number,
    default: 6,
  },
  fileSize: {
    type: Number,
    default: 100 * 1024 * 1024,
  },
  pwidth:{
     type: String,
    default:'210rpx'
  },
  pheight:{
     type: String,
    default:'210rpx'
  },
  pstyle:{
    type:String,
    default:''
  }
});
watch(() => props.modelValue, val => {
    if (val) {
      let temp = 1;
      // 首先将值转为数组
      const list = Array.isArray(val) ? val : props.modelValue.split(',');
      // 然后将数组转为对象数组
      fileList1.value = list.map(item => {
        if (typeof item === "string") {
          item = { name: item, url: store.state.user.QNDomain+ item,furl:item };
        }
        item.uid = item.uid || new Date().getTime() + temp++;
        return item;
      });
    } else {
      fileList1.value = [];
      return [];
    }
  },{ deep: true, immediate: true });
const url = ref('');


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));
      emit("upInfo",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);
  emit("update:modelValue", listToString(fileList1.value));
};

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>