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"
></up-upload>
    </view>
</template>
<script setup>
import * as qiniu from 'qiniu-js';
import { getQNtoken, addFileList } from "@/api/qiniu/info";
import config1 from "@/config";
import { ref, reactive, getCurrentInstance, defineEmits } from 'vue';
import { useStore } from 'vuex';

const emit = defineEmits();
const { proxy } = getCurrentInstance();
const uploadQiNiuDomain = config1.uploadQiNiuDomain;

const props = defineProps({
  fileTypeInfo: {
    type: String,
    default: "image",
  },
  limit: {
    type: Number,
    default: 6,
  },
  fileSize: {
    type: Number,
    default: 50 * 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: true
});
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
      });
      console.log("返回的数据:", store.state.user.QNDomain+result);
      emit('fileList', fileList1.value);
      fileListLen++;
    } catch (error) {
      console.error("上传失败:", error);
    }
  }
};

const uploadFilePromise = async (fileInfo1, name) => {
  fileInfo.name = store.state.user.phoneType + "_" + name;
  let extension1 = fileInfo1.url.split('.');
  fileInfo.type = fileInfo1.type + "/" + extension1[1];
  fileInfo.extension = extension1[1];
  try {
    const tokenData = await getQNtoken(fileInfo);
    dataToken.token = tokenData.QNtoken;
    dataToken.key = tokenData.key;
    const result = await uploadQN(fileInfo1.url);
    return result;
  } catch (error) {
    console.error("获取 token 或上传失败:", error);
    throw error;
  }
};

const uploadQN = (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');
};

typeInfo();
</script>
<style lang="scss" scoped>
</style>