插件库是基于elementPlus二次封装的，目前主要是自己项目有多次使用，和跨项目使用

安装elementPlus

npm install element-plus --save

安装后怎么配置，查看elementPlus官网：https://element-plus.org/zh-CN/guide/quickstart.html

安装二次封装组件库

npm i fly-stock

配置main.js

import flyStock from 'fly-stock'
import 'fly-stock/style.css'

app.use(flyStock)

插件1，针对el-upload的上传图片封装

ps:目前样式只兼容了图片上传的样式,传入参数类型没做校验，按要求来

页面直接使用：

<fly-upload-img></fly-upload-img>

接受参数

| 参数名 | 介绍 | 备注 | 类型 | | :----------- | :------ | :--------------------------------- | :------- | | action | 上传请求地址 | 同el-upload原生参数 | String | | headers | 请求头 | 同el-upload原生参数 | Object | | method | 上传方法 | 同el-upload原生参数，默认post | String | | accept | 上传文件类型 | 同el-upload原生参数，默认image/* | String | | size | 10 | 单位M，单个图片大小 | Number | | limit | 9 | 同el-upload原生参数 | Number | | width | 图片显示宽度 | 默认100px | Number | | height | 图片显示高度 | 默认null，不传默认等比例宽度 | Number | | background | 上传按钮背景色 | 默认#f0f2f5 | String | | fileList | 文件列表 | 回显用，默认[]，也可以跟父级文件列表动态绑定 | Array | | isDetails | 是否详情 | 默认false，主要用于详情，设置true，不显示删除按钮和新增按钮 | Boolean | | customGetImg | 图片上传方法 | 下面单独介绍，比较特殊 | Function |

customGetImg方法介绍，目前我们公司通过action上传oss后，后端返回的是一个 image/64b086922f9f4c919270fb4d5cf5c985.jpg 这种的真实地址，有些公司返回的是一个图片id，道理是一样的。然后通过调用一个统一的接口，把这个地址或id传给他获取一个临时访问地址，因为临时地址有有效期，所以每次在页面上都会拿新的

使用customGetImg

import { getUrl } from "./utils/api"
<fly-upload-img action="http://xxxxxxx/file/oss/upload" :customGetImg="getUrl"></fly-upload-img>

//getUrl
import request from "./request";

export function getUrl(src) {
  return new Promise(async (resolve, reject) => {
    try {
      const res = await request({
        url: "/file/oss/getUrl",
        method: "post",
        data: src,
      });
      resolve(res.url);
    } catch (error) {
      reject(error);
    }
  });
}

回调方法onAdd和onDel

//每次新增
function getAddUrl(obj){
  console.log('list',obj.fileList)
  console.log('当前新增url',obj.url)
}

//每次删除
function getDelUrl(obj){
  console.log('list',obj.fileList)
  console.log('当前删除url',obj.url)
}

完整使用示例

<script setup>
import { ref } from "vue";
import { getUrl } from "./utils/api"

const uploadUrl = import.meta.env.VITE_APP_BASE_API + "/file/oss/upload";
const headers = {
  token: 'xxxxx'
}

const fileList = ref([])

//每次新增
function getAddUrl(obj) {
  console.log('list', obj.fileList)
  console.log('当前新增url', obj.url)
}

//每次删除
function getDelUrl(obj) {
  console.log('list', obj.fileList)
  console.log('当前删除url', obj.url)
}


</script>

<template>
  <div>
    <fly-upload-img :action="uploadUrl" :customGetImg="getUrl" :headers="headers" :size="5" :limit="6" :width="150"
      :fileList="fileList" :isDetails="false" background="#ff0000" @onAdd="getAddUrl"
      @onDel="getDelUrl"></fly-upload-img>
  </div>
</template>

<style scoped></style>