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

const uploadFilePromise = async (fileInfo1, name) => {
  console.log("fileInfo1:",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] == null){
    extension1[1] = fileNameOld[1]
  }
  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 observer = {
  next(res){
    console.log("next:",res)
  },
  error(err){
    console.log("error:",err)
  },
  complete(res){
    console.log("complete:",res)
  }
}
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>