优化菜单搜索查询页

RuoYi

2025-04-21 589151d1edded867fd8d15e9249fd0dfbf3544ef

 src/components/ImageUpload/index.vue

@@ -6,11 +6,12 @@
      list-type="picture-card"

      :on-success="handleUploadSuccess"

      :before-upload="handleBeforeUpload"

      :data="data"

      :limit="limit"

      :on-error="handleUploadError"

      :on-exceed="handleExceed"

      name="file"

      :on-remove="handleRemove"

      ref="imageUpload"

      :before-remove="handleDelete"

      :show-file-list="true"

      :headers="headers"

      :file-list="fileList"

@@ -47,9 +48,19 @@


<script setup>

import { getToken } from "@/utils/auth";

import { isExternal } from "@/utils/validate";



const props = defineProps({

  modelValue: [String, Object, Array],

  // 上传接口地址

  action: {

    type: String,

    default: "/common/upload"

  },

  // 上传携带的参数

  data: {

    type: Object

  },

  // 图片数量限制

  limit: {

    type: Number,

@@ -79,7 +90,7 @@
const dialogImageUrl = ref("");

const dialogVisible = ref(false);

const baseUrl = import.meta.env.VITE_APP_BASE_API;

const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址

const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + props.action); // 上传的图片服务器地址

const headers = ref({ Authorization: "Bearer " + getToken() });

const fileList = ref([]);

const showTip = computed(

@@ -93,7 +104,7 @@
    // 然后将数组转为对象数组

    fileList.value = list.map(item => {

      if (typeof item === "string") {

        if (item.indexOf(baseUrl) === -1) {

        if (item.indexOf(baseUrl) === -1 && !isExternal(item)) {

          item = { name: baseUrl + item, url: baseUrl + item };

        } else {

          item = { name: item, url: item };

@@ -106,23 +117,6 @@
    return [];

  }

},{ deep: true, immediate: true });



// 删除图片

function handleRemove(file, files) {

  emit("update:modelValue", listToString(fileList.value));

}



// 上传成功回调

function handleUploadSuccess(res) {

  uploadList.value.push({ name: res.fileName, url: res.fileName });

  if (uploadList.value.length === number.value) {

    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);

    uploadList.value = [];

    number.value = 0;

    emit("update:modelValue", listToString(fileList.value));

    proxy.$modal.closeLoading();

  }

}



// 上传前loading加载

function handleBeforeUpload(file) {

@@ -141,9 +135,11 @@
    isImg = file.type.indexOf("image") > -1;

  }

  if (!isImg) {

    proxy.$modal.msgError(

      `文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`

    );

    proxy.$modal.msgError(`文件格式不正确，请上传${props.fileType.join("/")}图片格式文件!`);

    return false;

  }

  if (file.name.includes(',')) {

    proxy.$modal.msgError('文件名不正确，不能包含英文逗号!');

    return false;

  }

  if (props.fileSize) {

@@ -162,6 +158,41 @@
  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);

}



// 上传成功回调

function handleUploadSuccess(res, file) {

  if (res.code === 200) {

    uploadList.value.push({ name: res.fileName, url: res.fileName });

    uploadedSuccessfully();

  } else {

    number.value--;

    proxy.$modal.closeLoading();

    proxy.$modal.msgError(res.msg);

    proxy.$refs.imageUpload.handleRemove(file);

    uploadedSuccessfully();

  }

}



// 删除图片

function handleDelete(file) {

  const findex = fileList.value.map(f => f.name).indexOf(file.name);

  if (findex > -1 && uploadList.value.length === number.value) {

    fileList.value.splice(findex, 1);

    emit("update:modelValue", listToString(fileList.value));

    return false;

  }

}



// 上传结束处理

function uploadedSuccessfully() {

  if (number.value > 0 && uploadList.value.length === number.value) {

    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);

    uploadList.value = [];

    number.value = 0;

    emit("update:modelValue", listToString(fileList.value));

    proxy.$modal.closeLoading();

  }

}



// 上传失败

function handleUploadError() {

  proxy.$modal.msgError("上传图片失败");