使用中遇到问题或者有更好的建议和意见，欢迎联系本人qq2843265187，jasen孔小弟

比较全的文档，请参考！！！csdn

https://blog.csdn.net/weixin_46095200/article/details/107288187

vue+element 文件上传组件

jasen-vue-uploadmodel component. Easy to use.

githab地址

https://github.com/jasen666/uploadmodel.git

Install

npm i jasen-vue-uploadmodel -S

Usage

import Vue from 'vue'
import UploadFile from 'jasen-vue-uploadmodel'

Vue.component('UploadFile', UploadFile)

<UploadFile
        clearButtonStyle="margin-left:80px;margin-top:10px"
        :visible="changeFormVisible"
        :Hppt="Hppt"
        :className="'My-el-form-item'"
        :fromKey="'logo'"
        @setUrlPath="SetUrlPath"
        :limit="1"
        :fileList.sync="fileListLogo"
        :label="'logo'"
      />

Api

Properties

| Name | Type | Default | Description | |----------------------|-----------|--------------|--------------------------------------------------------------------| | accept | String | ".jpg, .png, .gif, .jpeg" | "上传文件的类型，默认图片类型" | | Hppt | String | | 上传文件的端口地址（本地环境、测试环境、线上环境） | | port | String | | 上传图片的地址，详细地址（/upload.json这样） | | Size | `Number|Boolean` | `false` | 是否需要规定上传文件的大小 | | needRequired | `Boolean` | `true` | 是否需要为空校验 | | errorMessage | `String` | `请上传图片文件`| 为空提交的时候的提示 | | fileList | `Array` | `[]` | 文件上传的一个数组，用来存放上传文件内容 ,需要.sync支持 | | putSuccessShowAddBtn | `Boolean` | `false` | 上传成功后是否还展示，上传按钮 | | Proportion | `Boolean|Array` | `false` | 是否需要规定图片的尺寸比例大小 | | computationRule | `String` | `===` | 进行比例对比时的规则，支持：===|>=|<= | | listType | `String` | `picture-card` | 是上传图片，还是上传文件，图片使用:picture-card,文件使用：text | | showFileList | `Boolean` | `true` | 上传成功后是否需要上传进行展示已上传文件列表 | | fromKey | `String|Array` | | 上传成功后，将要修改的字段名字，把后台的文件路径进行复制 | | limitMax|否 | Number | 2 |文件最大的上传个数 | | limitMin|否 | Number | 1 |文件最少上传个数 | | showClearAllBtn | Boolean | true | 是否展示一键清除按钮 | | needMultiple | Boolean | false | 是否支持多选 | | withCredentials | Boolean | false | 是否上传cooike凭证 | | headers | object | `` | 设置上传的请求头部 | | label | String | | 上传图片的左侧内容：例如：商标、天空啥啥的 | | clearButtonStyle | String | margin-top:10px | 一键清除的按钮样式 | | visible | Boolean | false |可穿可不传，建议传一个动态的，当你进行回显的时候会有一个，渐显的效果，体验不是特别好， | | ==================== | ========= | ============ | =================== |

Methods

| Method | Description | |-------------------|--------------------------| | this.$emit('deleteServeFile',file) | 图片|文件进行删除的时候会触发，此时你会拿到文件的信息，去服务器删除数据+ | | this.$emit('setUrlPath',{ fromKey: this.fromKey, url: response.imgUrl, //传入服务器返回数据 multiple, //判断是否是多选 response,//服务器返回的信息 nowIndex: multiple === true ? fileList.findIndex(item => item.url === response.imgUrl) : "" //传入当前下标 }) | 文件上传到服务器，会把服务返回内容，通过这个事件返回过去， |

setUrlPath事件可参考

    SetUrlPath(prcturlData) {
      if (prcturlData.multiple) {
        this.fromdata[prcturlData.fromKey[prcturlData.nowIndex]] =
          prcturlData.url;
      } else {
        this.fromdata[prcturlData.fromKey] = prcturlData.url;
      }
    },

element版本必须2.5以上哦，不然slot-scope不好使，你的单个删除按钮也没有用

关于版本更新

| 1.1.0 | 更新了图片高度|