Artronupload NPM

上传组件

原生项目引入组件

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://components.artron.net/imgupload/ImgUploadCom.umd.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.js"></script>
<link rel="stylesheet" href="https://components.artron.net/imgupload/ImgUploadCom.css">
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/theme-chalk/index.css" rel="stylesheet">

<div id="app">
  <artronupload></artronupload>
</div>

<script>
new Vue({
  components: {
    artronupload: ImgUploadCom
  }
}).$mount('#app')
</script>

Vue项目引入组件

  npm i artronupload

页面引入组件

<script>
  import artronupload from 'artronupload'
  import 'artronupload/ImgUploadCom.css';
</script>

参数

   :width='300' 
   :height='300' 
   :max="9" 
   type='img'
   :draggable='true'
   :inputShow='true'
   uploaderauthUrl='https://write.artron.net/upload/getWebUploaderAuth' 
   :uploadedfileList='arr'
   objectFit='cover'
   @on-uploaded='uploaded' 
   @on-draggable='draggableed'

API

参数	说明	类型	可选值	默认值
type	类型	String	img, audio, video, pdf, word, excel	img
max	最多上传数量	Number	--	9
maxSize	最大上传尺寸	Number	--	1024 1024 200
width	宽度	Number	--	120
height	高度	Number	--	120
inputShow	是否显示输入框	Boolean	true,fasle	false
draggable	是否可以拖拽	Boolean	true,fasle	false
objectFit	图片显示类型	String	contain,cover	contain
uploadedfileList	回显上传文件	Array	--	[]
sourceType	sourceType	Number	--	--
configUrl	获取配置地址（返回sourceType和验证地址）	Srting	--	--
uploaderauthUrl	上传验证地址	Srting	--	--

Methods

事件名称	说明	回调参数
on-uploaded	上传成功触发	当前上传成功图片数组
on-draggable	拖拽完成触发	排序之后的数组

上传成功之后返回的图片数组字段 :tada:

{
    auth: ""//加密值
    ext: ""//文件类型
    file: File
    height: ''//图片高度
    md5: ""//加密MD5
    name: ""//图片名称
    path: ""//图传上传地址
    size: ''//图片大小
    status: ""//图片状态
    width: ''//图片宽度
}

@infinitebrahmanuniverse/nolb-art @everything-registry/sub-chunk-1167 @zalastax/nolb-art

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago