绝配前端组件库

# 常用上传组件

# 样式 1

仅支持图片

size自定义

单张图片（上传log场景）

多张图片默认横向滚动，也支持换行

默认不可以拖动，也支持拖动

测试赋值

<template>
  <div>
    <jp-input placeholder="上传图片接口" v-model="url"></jp-input>
    <jp-input style="margin-top: 12px" placeholder="Token" v-model="token"></jp-input>
    <jp-upload-box :uploadImgUrl="url" :headers="{ Authorization: 'Bearer ' + token }"></jp-upload-box>

    <h3>仅支持图片</h3>
    <jp-upload-box
      :uploadImgUrl="url"
      :headers="{ Authorization: 'Bearer ' + token }"
      accept=".jpeg,.jpg,.png"
      :maxFileSize="6"
      :limit="5"
      :readOnluy="readOnluy"
      tips="支持png/jpg/jpeg，大小不超过6M，最多上传5个文件"
    ></jp-upload-box>
    <jp-switch active-text="readOnluy" v-model="readOnluy"></jp-switch>

    <h3>size自定义</h3>
    <jp-upload-box :wrap="false" :uploadImgUrl="url" :headers="{ Authorization: 'Bearer ' + token }" :size="size"></jp-upload-box>
    <jp-slider :min="60" :max="150" v-model="size" :step="5" show-stops></jp-slider>

    <h3>单张图片（上传log场景）</h3>
    <jp-upload-box :uploadImgUrl="url" :headers="{ Authorization: 'Bearer ' + token }" :limit="1" tips="请上传一张logo图片"></jp-upload-box>

    <h3>多张图片默认横向滚动，也支持换行</h3>
    <jp-upload-box :wrap="true" :uploadImgUrl="url" :headers="{ Authorization: 'Bearer ' + token }"></jp-upload-box>

    <h3>默认不可以拖动，也支持拖动</h3>
    <jp-upload-box :dragDisabled="false" :wrap="true" :uploadImgUrl="url" :headers="{ Authorization: 'Bearer ' + token }"></jp-upload-box>
    <h3>测试赋值</h3>
    <jp-upload-box
      ref="testInit"
      :dragDisabled="false"
      :wrap="true"
      :uploadImgUrl="url"
      :headers="{ Authorization: 'Bearer ' + token }"
    ></jp-upload-box>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 120,
      readOnluy: false,
      url: 'http://172.19.7.245:18085/common/upload',
      token:
        'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjkyMDhmZmRkLThlZTQtNGJmNC1hNGRmLTI2OWIyNDljNzU2NiJ9.7cme6HZOngiEIqAV3kY5P9A4rmvSdlZIbVOKhaN8hbkE86zuFWHxF0jxJBSIzeHPs5_4cXM66krr8j8NcmcvFw',
      imgUrlList: [
        {
          location: 'http://116.62.209.98:9097/TMS/QianShouGuanLi/2023-02-13/库存托盘数 (2)_236f654293664f0fb9deccdae4d5b74d.xlsx',
          fileName: ''
        },
        {
          location: 'http://116.62.209.98:9097/TMS/QianShouGuanLi/2023-02-13/奇门白皮书V3.9.5_4637fdcb0be64e1c9e1386e2d422e9c7.pdf',
          fileName: ''
        },
        {
          location: 'http://116.62.209.98:9097/TMS/QianShouGuanLi/2023-02-13/GIF_068d0efe14e74dd8b2240f8cbc5f1471.gif',
          fileName: ''
        },
        {
          location: 'http://116.62.209.98:9097/TMS/QianShouGuanLi/2023-02-13/这是照片1_2d4d0e9f5c0d4778a20958211d353796.jpg',
          fileName: ''
        },
        {
          location: 'http://116.62.209.98:9097/TMS/QianShouGuanLi/2023-02-13/小松鼠_8d8cab297dd8496db0014134aa009532.png',
          fileName: ''
        }
      ]
    }
  },
  components: {},
  watch: {},
  mounted() {
    this.$refs.testInit.initFileList(this.imgUrlList)
  },
  methods: {}
}
</script>

<style scoped></style>
显示代码

# 说明

  • 组件属性 responseString 默认为 false 表示上传图片的接口返回的格式是这种 {code:200, fileName: '', url: ''}

  • 组件属性 responseString 为 true，表示接口的数据格式是直接返回图片，类似这种： /profile/upload/business/1689311526453.jpg host 表示图片的域名

按照标准 先支持这 2 种数据结构，接口实现选其一

初始化 fileUrlList 的格式必须为
fileUrlList = [{location: '', fileName: ''}]
图片上传完成 fileUrlList 会更新最新的数据

# Attributes

参数 说明 类型 默认值
tips 提示语 string 支持 png/jpg/文档上传，大小不超过 10M，最多上传 10 个文件
accept 支持文件格式 string '.jpeg,.jpg,.png,.pdf,.tiff,.swf,.txt,.doc,.xls,.ppt,.docx,.xlsx,.pptx,.bmp,.gif,.webp,.svg'
maxFileSize 文件最大值 number 10
multiple 是否支持多选 bool true
autoUpload 自动上传 bool true
showFlag 显示非图片文件的脚标样式 bool true
uploadImgUrl 上传图片地址 string ''
headers 上传图片 headers Object {}
size 图片大小 number 120
fileUrlList 初始化数组 array [{location: '', fileName: ''}]
limit 最多文件个数 number 10
readOnluy 只读 bool false
wrap 换行展示 bool false
dragDisabled 禁止拖动 bool true

# Events

事件名称 说明 事例
initFileList 通过引用的方式，设置 fileList 的初始值 this.$refs.upload.initFileList(res.data.attachmentList)

← JpImagePreview 图片预览组件 →