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

<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) => {
  console.log("event:", 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", fileList1.value);
      fileListLen++;
    } catch (error) {
      console.error("上传失败:", error);
    }
  }
};

const uploadFilePromise = async (fileInfo1, name) => {
  console.log("fileInfo1:",fileInfo1);
  // 主要目的的拼名字，大小，类型
  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];
  console.log("fileInfo.type:",fileInfo);
  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);
};
//废弃
const uploadQN2 = (file) => {
  return new Promise((resolve, reject) => {
    const observable = qiniu.upload(file, dataToken.key, dataToken.token, putExtra, config);
    const subscription = observable.subscribe({
      next(res) {
        console.log("next:", res);
      },
      error(err) {
        console.log("error:", err);
        reject(err);
      },
      async complete(res) {
        console.log("complete:", res);
        form.url = res.key;
        form.name = res.key;
        form.type = res.mimeType;
        form.size = res.fsize;
        await addFileList(form);
        resolve(res.key);
      }
    });
  });
};
//调用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');
  console.log(store.state.user.phoneType);
};
  // 对象转成指定字符串分隔
  function listToString(list, separator) {
    let strs = "";
    separator = separator || ",";
    for (let i in list) {
      if (list[i].url) {
        strs += list[i].url + separator;
      }
    }
    return strs != '' ? strs.substr(0, strs.length - 1) : '';
  }
typeInfo();
</script>

<style lang="scss" scoped>
</style>