新增图片上传组件

RuoYi

2021-12-30 61161cdd698fd690860943275d296ade38e6dcf1

新增图片上传组件

 src/components/ImageUpload/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,197 @@
<template>

  <div class="component-upload-image">

    <el-upload

      :action="uploadImgUrl"

      list-type="picture-card"

      :on-success="handleUploadSuccess"

      :before-upload="handleBeforeUpload"

      :limit="limit"

      :on-error="handleUploadError"

      :on-exceed="handleExceed"

      name="file"

      :on-remove="handleRemove"

      :show-file-list="true"

      :headers="headers"

      :file-list="fileList"

      :on-preview="handlePictureCardPreview"

      :class="{ hide: fileList.length >= limit }"

    >

      <el-icon class="avatar-uploader-icon"><plus /></el-icon>

    </el-upload>

    <!-- ä¸Šä¼ æç¤º -->

    <div class="el-upload__tip" v-if="showTip">

      è¯·ä¸Šä¼ 

      <template v-if="fileSize">

        å¤§å°ä¸è¶…过 <b style="color: #f56c6c">{{ fileSize }}MB</b>

      </template>

      <template v-if="fileType">

        æ ¼å¼ä¸º <b style="color: #f56c6c">{{ fileType.join("/") }}</b>

      </template>

      çš„文件

    </div>



    <el-dialog

      v-model="dialogVisible"

      title="预览"

      width="800px"

      append-to-body

    >

      <img

        :src="dialogImageUrl"

        style="display: block; max-width: 100%; margin: 0 auto"

      />

    </el-dialog>

  </div>

</template>



<script setup>

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



const props = defineProps({

  modelValue: [String, Object, Array],

  // å›¾ç‰‡æ•°é‡é™åˆ¶

  limit: {

    type: Number,

    default: 5,

  },

  // å¤§å°é™åˆ¶(MB)

  fileSize: {

    type: Number,

    default: 5,

  },

  // æ–‡ä»¶ç±»åž‹, ä¾‹å¦‚['png', 'jpg', 'jpeg']

  fileType: {

    type: Array,

    default: () => ["png", "jpg", "jpeg"],

  },

  // æ˜¯å¦æ˜¾ç¤ºæç¤º

  isShowTip: {

    type: Boolean,

    default: true

  },

});



const { proxy } = getCurrentInstance();

const emit = defineEmits();

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 headers = ref({ Authorization: "Bearer " + getToken() });

const fileList = ref([]);

const showTip = computed(

  () => props.isShowTip && (props.fileType || props.fileSize)

);



watch(() => props.modelValue, val => {

  if (val) {

    // é¦–先将值转为数组

    const list = Array.isArray(val) ? val : props.modelValue.split(",");

    // ç„¶åŽå°†æ•°ç»„转为对象数组

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

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

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

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

        } else {

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

        }

      }

      return item;

    });

  } else {

    fileList.value = [];

    return [];

  }

});



// åˆ é™¤å›¾ç‰‡

function handleRemove(file, files) {

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

  if (findex > -1) {

    fileList.value.splice(findex, 1);

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

  }

}



// ä¸Šä¼ æˆåŠŸå›žè°ƒ

function handleUploadSuccess(res) {

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

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

  proxy.$modal.closeLoading();

}



// ä¸Šä¼ å‰loading加载

function handleBeforeUpload(file) {

  let isImg = false;

  if (props.fileType.length) {

    let fileExtension = "";

    if (file.name.lastIndexOf(".") > -1) {

      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);

    }

    isImg = props.fileType.some(type => {

      if (file.type.indexOf(type) > -1) return true;

      if (fileExtension && fileExtension.indexOf(type) > -1) return true;

      return false;

    });

  } else {

    isImg = file.type.indexOf("image") > -1;

  }

  if (!isImg) {

    proxy.$modal.msgError(

      `文件格式不正确, è¯·ä¸Šä¼ ${props.fileType.join("/")}图片格式文件!`

    );

    return false;

  }

  if (props.fileSize) {

    const isLt = file.size / 1024 / 1024 < props.fileSize;

    if (!isLt) {

      proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);

      return false;

    }

  }

  proxy.$modal.loading("上传中");

}



// æ–‡ä»¶ä¸ªæ•°è¶…出

function handleExceed() {

  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} ä¸ª!`);

}



// ä¸Šä¼ å¤±è´¥

function handleUploadError() {

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

  proxy.$modal.closeLoading();

}



// é¢„览

function handlePictureCardPreview(file) {

  dialogImageUrl.value = file.url;

  dialogVisible.value = true;

}



// å¯¹è±¡è½¬æˆæŒ‡å®šå­—符串分隔

function listToString(list, separator) {

  let strs = "";

  separator = separator || ",";

  for (let i in list) {

    strs += list[i].url.replace(baseUrl, "") + separator;

  }

  return strs != "" ? strs.substr(0, strs.length - 1) : "";

}

</script>



<style scoped lang="scss">

// .el-upload--picture-card æŽ§åˆ¶åŠ å·éƒ¨åˆ†

:deep(.hide .el-upload--picture-card) {

  display: none;

}

// åŽ»æŽ‰åŠ¨ç”»æ•ˆæžœ

:deep(.el-list-enter-active),

:deep(.el-list-leave-active) {

  transition: all 0s;

}

:deep(.el-list-enter, .el-list-leave-active) {

  opacity: 0;

  transform: translateY(0);

}

</style>

 src/main.js

@@ -31,6 +31,8 @@
import Pagination from '@/components/Pagination'

// è‡ªå®šä¹‰è¡¨æ ¼å·¥å…·ç»„件

import RightToolbar from '@/components/RightToolbar'

// å›¾ç‰‡ä¸Šä¼ ç»„件

import ImageUpload from "@/components/ImageUpload"

// è‡ªå®šä¹‰æ ‘选择组件

import TreeSelect from '@/components/TreeSelect'

// å­—典标签组件

@@ -51,6 +53,7 @@
app.component('DictTag', DictTag)

app.component('Pagination', Pagination)

app.component('TreeSelect', TreeSelect)

app.component('ImageUpload', ImageUpload)

app.component('RightToolbar', RightToolbar)



app.use(router)