1.0.17 • Published 1 year ago
artronupload v1.0.17
上传组件
原生项目引入组件
<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: ''//图片宽度
}