README
upload 上传
upload是将信息(网页、文字、图片、视频等)通过网页发布到七牛云存储服务器上的组件。同时整合图片预览、视频播放、列表文件选择功能。
代码演示
最基础的文件上传
<template>
<div>
<el-form :model="formData" label-width="80px">
<el-form-item label="文件">
<upload
:token="token.video"
:domain="domain"
:maxSize="2"
:mustExt="['png', 'jpg']"
@change="onUploadChange"
@error="onUploadError">
</upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data () {
return {
formData: {
},
domain: 'https://forum01.jiaoliuqu.com/',
token: undefined
}
},
mounted () {
this.getUploadToken('forum', 1, '1')
},
methods: {
getUploadToken (bucket, isWater, appCode) {
// ... 获取上传token
},
// 上传错误处理
onUploadError (msg) {
this.$message.error(msg)
},
// 上传结果接收
onUploadChange (files, checked) {
console.log(files, checked)
},
}
}
</script>
用于编辑的表单时,我们上传文件可能有默认的数据,可以通过defaultList 属性传入默认已上传的文件,这里要注意defaultList 是一个数组, defaultList 拥有 以下属性:
属性 | 说明 | 类型 | 是否必需/ 默认值 |
---|---|---|---|
key | 取消按钮文字 | String | 是 |
width | 确认按钮文字 | Number | 否, 默认0 |
height | 标题 | Number | 否, 默认0 |
duration | (声音,视频)时长 | Number | 否, 默认0 |
size | 资源大小 | Number | 否, 默认0 |
下面是一个带默认值的例子:
<template>
<div>
<el-form :model="formData" label-width="80px">
<el-form-item label="文件">
<upload
:token="token.video"
:domain="domain"
sortable
multiple
multipleChooice
:maxSize="2"
:mustExt="['png', 'jpg']"
@change="onUploadChange"
@error="onUploadError"
:defaultList="images"
:selected="cover"
selectLabel="附件"
selectable>
</upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import SoaClient from '@/lib/SoaClient'
export default {
data () {
return {
formData: {
},
domain: 'https://forum01.jiaoliuqu.com/',
token: {
forum: undefined,
},
images: [
{ key: '215735410480009464.png', width: 800, height: 600 },
{ key: '215735410480009464.png', width: 800, height: 600 }
],
cover: ['215735410480009464.png', '015735410950009081.png']
}
},
mounted () {
this.getUploadToken('forum', 1, '1')
},
methods: {
onSubmit () {
console.log('submit!')
},
onUploadError (msg) {
this.$message.error(msg)
},
onUploadChange (files, selected) {
console.log(files, selected)
},
getUploadToken (bucket, isWater, appCode) {
// ...
}
}
}
</script>
listType 决定了上传后的展示类型以及文件上传的类型:
默认listType="file"时, 类型只受mustExt参数限定, 效果如下:
当listType="img"时, 类型只支持(jpg, jepg, png, gif), 同时受mustExt参数限定, 效果如下:
当listType="video"时, 类型只支持(mp4), 同时受mustExt参数限定, 效果如下:
API
参数 | 说明 | 类型 | 默认值 | |
---|---|---|---|---|
listType | 文件展示类型, 可选值为file, img, video | String | file | |
token | 上传文件的token | String | '' | |
domain | 上传空间绑定的域名 | String | '' | |
sortable | 文件列表是否可拖拽排序 | Boolean | false | |
multiple | 是否允许多文件上传 | Boolean | false | |
selectable | 是否对列表可选择 | Boolean | false | |
selectLabel | 列表可选择时的文案 | String | '' | |
selected | 列表默认已选中的key数组 | String[] | [] | |
multipleChooice | 列表可选是否支持多选 | Boolean | false | |
maxSize | 单个文件最大允许的尺寸,单位是兆(MB),默认0表示无限制 | Number | 0 | |
defaultList | 默认的文件列表 | Object[] | [] | |
mustExt | 默认的文件类型,默认无限制 | String[] | [] |
事件
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 上传文件改变时的状态 | function(fileList, selected) |
error | 上传文件时出错返回的错误内容 | function(message) |