Jasen-vue-uploadmodel NPM

使用中遇到问题或者有更好的建议和意见，欢迎联系本人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;
      }
    },