示例
何时使用
- 需要上传一个货多个文件。
- 显示上传的过程
类型
支持图片、文件、富媒体上传。
PCPhonePad
<page>
<module title='文件上传'>
<x-form layout='horizontal'>
<x-item
label='文件上传'
node='upload'
name='a'
text='自定义文案'
/>
</x-form>
</module>
<module title='图片上传'>
<x-form layout='horizontal'>
<x-item
label='图片上传'
type='image'
node='upload'
name='a'
text='自定义文案'
/>
</x-form>
</module>
</page>
export default XPage({
data: {
},
});
状态
Cabin X给予用户不同上传过程的反馈
PCPhonePad
<x-page>
<module title='文件上传成功'>
<x-form layout="horizontal">
<x-item maxLength={{100}} :action="actionParam" node="upload" label="手动上传" manual-upload={{true}}
:validators="validator" description="选择多余5个文件试试" exampleUrl="http://www.baidu.com" bindpreview='preview'>
</x-item>
</x-form>
</module>
<module title='图片上传成功'>
<x-form layout="horizontal">
<x-item
label="图片上传成功"
node="upload"
name="a"
type="image"
max-length="{{1}}"
beforeRender="{{beforeRenderSuccess}}"
/>
</x-form>
</module>
<module title='图片上传成功（多个）'>
<x-form layout="horizontal">
<x-item
label="图片上传成功（多个）"
node="upload"
name="b"
type="image"
max-length="{{4}}"
value="{{fileLink}}"
beforeRender="{{beforeRenderSuccess}}"
/>
</x-form>
</module>
<module title='图片上传错误'>
<x-form layout="horizontal">
<x-item
label="图片上传错误"
node="upload"
name="c"
type="image"
max-length="{{1}}"
beforeRender="{{beforeRenderAsync}}"
/>
</x-form>
</module>
<module title='图片禁止上传'>
<x-form layout="horizontal">
<x-item
label="图片禁止上传"
node="upload"
name="d"
type="image"
disabled=''
max-length="{{4}}"
/>
</x-form>
</module>
</x-page>
export default XPage({
data: {
actionParam: {
// url: '//testapi-nodedmallos.dmall.com/cabinx/file/upload',
url: 'http://rd-yapi.dmall.com/mock/45/cabinx/upload',
param: {
param1: 1111
}
},
fileLink: [
{
name: 'abc1',
uid: 1,
url: 'https://photo.tuchong.com/420404/f/197909858.jpg',
},
{
name: 'abc12',
uid: 2,
url: 'https://photo.tuchong.com/420404/f/580114838.jpg',
},
{
name: 'abc13',
uid: 3,
url: 'https://photo.tuchong.com/420404/f/377210707.jpg',
},
{
name: 'abc4',
uid: 4,
url: 'https://photo.tuchong.com/420404/f/613987079.jpg',
},
{
name: 'abc5',
uid: 5,
url: 'https://photo.tuchong.com/420404/f/586777463.jpg',
},
{
name: 'abc6',
uid: 6,
url: 'https://photo.tuchong.com/420404/f/377210707.jpg',
},
],
},
preview(file){
console.info(file)
alert(file.name);
},
validator() {
return new Promise((resolve, reject) => {
// resolve('33');
resolve({
text: 'item 底部的默认message',
detail: {
title: 'popover的title',
list: [
'error1',
'error2',
'error3',
'error4',
'error5',
'error6',
'error7',
'error8',
'error9',
'error10',
'error11',
'error12',
'error13',
'error14',
'error15',
'error16',
'error17',
'error18',
'error19',
'error20',
'error21',
'error22',
'error23',
'error24',
'error25',
'error26',
'error27',
'error28',
'error29',
'error30',
],
},
});
});
},
beforeRenderSuccess(data){ // 同步
return {// 标准返回成功 格式
code: '0000',
data: "http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
}
},
beforeRenderAsync(data){ // 异步
return new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve({
code:'0001',
msg:'虽然服务器希望我展示成功，但是我非要展示失败'
})
},3000)
});
},
});
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 端 | 版本 |
|---|---|---|---|---|---|---|
| name | 名称 | string | -- | -- | PC/Mobile | -- |
| value | 绑定值 | array<{查看返回的值}> | -- | -- | PC/Mobile | -- |
| type | 类型 | string | file/image | file | PC/Mobile | -- |
| action | 上传请求相关参数，如果不传的话，组件只是一个文件选择器，而没上传功能 | string/{url, params, withCredentials, timeout}/null | -- | -- | PC/Mobile | -- |
| maxlength | 最大长度 | number | -- | 1 | PC/Mobile | -- |
| accept | 同原生属性（.txt,.dll）（参考） | string | -- | -- | PC/Mobile | -- |
| text | 按钮文本 | string | -- | 上传文件/上传图片 | PC/Mobile | -- |
| hide-thumbnail | 隐藏缩略列表 | boolean | -- | false | PC/Mobile | -- |
| sortable | 是否可拖动调整顺序 | boolean | -- | false | PC | -- |
| disabled | 禁用 | boolean | -- | false | PC/Mobile | -- |
| loaded | 请求处理完成后的回调 | function | -- | -- | PC/Mobile | -- |
| beforeRequest | 在组件发送请求前触发，用户可以在此修改请求的参数，如果返回false，则阻止请求发送 | function | PC/Mobile | -- | ||
| beforeRender | 如果指定了action属性，可以在此更改请求返回的数据，注意:接口需要返回{code:0000,data:response}的格式，如果接口不是这个格式，可以使用该属性转换 | PC/Mobile | -- | |||
| beforeRemove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 | function(file, fileList) | PC/Mobile | -- | ||
| beforeRenderFile | 文件列表改变时触发,每次返回单个文件可以设置文件自定义属性,增加bottomSlot 属性可以配置html 标签 用于图片模式下展示 | function(file, fileList) | PC | -- | ||
| not-cabinx-tag | 如果需要用原生标签，可以 使用这个参数，编译器将不会对 upload 转成 x-upload 。注意， 这个标签只在命令行编译阶段生效，而不是运行阶段， 所以，赋值对他是没有用的 | boolean | true/false | false | PC/Mobile | -- |
| manual-upload | 是否手动上传 | boolean | true/false | false | PC/Mobile | -- |
Events
| 名称 | 说明 | 回调参数 |
|---|---|---|
| changed | 值改变后触发 | ([{name: 名称, raw: 文件, response: 后端返回, url: 图片预览地址}]) |
| preview | 在非type!='image'的情况下，点击文件后会触发 | file |