ImageUploader 图片上传
APP
PC
用于图片上传,基于Uploader。
引入方式
数字生活网页应用工程中,不需要 import,直接使用组件标签即可。
import {ImageUploader} from '@21cnfe/vui' Vue.component('ImageUploader', ImageUploader)
|
代码演示
ImageUploader 图片上传组件
imageUploader
示例链接
示例源码
二维码
扫二维码查看演示效果

基本用法
<template> <ImageUploader v-model="files" post-action="/postImage.action" :size="1024 * 1024 * 200" @input-file="inputFile" :customAction="customAction" /> </template> <script> export default { name: 'uploaderExample', data () { return { files: [], uploadFiles: [] } }, watch: { files (val) { console.log(val) } }, methods: { async inputFile(newFile, oldFile) { console.log('input file: newFile', newFile); console.log('input file:oldFile', oldFile); }, customAction () { this.$Toast.loading({ content: '上传中...', duration: null, }); return new Promise(resolve => { setTimeout(() => { this.$Toast.hide(); this.$Toast.success({ content: '上传成功', duration: 1.2, mask: false }); resolve(true); }, 1000); }) } } } </script>
|
属性
属性 |
说明 |
类型 |
默认值 |
post-action |
POST 请求的上传URL |
String |
undefined |
put-action |
PUT 请求的上传URL |
String |
undefined |
custom-action |
自定义上传方法,优先级高于 put-action, post-action |
async Function |
undefined |
headers |
自定义当前文件 HTTP Header |
Object |
`` |
data |
自定义当前文件 body 或 query 附加内容 |
Object |
`` |
timeout |
自定义当前单个文件的上传超时时间 |
Number |
`` |
value, v-model |
文件列表,不可直接修改 files,请使用 add, update, remove 方法修改 |
Array |
[] |
multiple |
文件表单的 multiple 属性,是否允许选择多个文件 |
Boolean |
false |
size |
允许上传的最大字节 |
Number |
0 |
maximum |
列表最大文件数 |
Number |
props.multiple ? 0 : 1 |
thread |
同时并发上传的文件数量线程数 |
Number |
1 |
事件
事件名称 |
说明 |
参数 |
@input-filter |
输入文件过滤 |
`newFile: File |
@input-file |
添加,更新,移除 后 |
`newFile: File |
实例 File
名称 |
说明 |
类型 |
默认值 |
fileObject |
是否是文件类型 |
Boolean |
true |
id |
文件id |
String |
Number |
size |
文件大小 |
Number |
-1 |
name |
文件名 |
String |
`` |
type |
MIME类型 |
String |
`` |
active |
激活或终止上传 |
Boolean |
false |
error |
上传失败错误代码 |
String |
`` |
success |
是否上传成功 |
Boolean |
false |
putAction |
自定义当前文件 POST 地址 |
String |
`` |
headers |
自定义当前文件 HTTP Header |
Object |
`` |
data |
自定义当前文件 body 或 query 附加内容 |
Object |
`` |
timeout |
自定义当前单个文件的上传超时时间 |
Number |
`` |
response |
响应的数据 |
Object |
String |
progress |
上传进度 |
String |
0.00 |
speed |
每秒的上传速度 |
Number |
0 |
xhr |
HTML5 上传 XMLHttpRequest 对象 |
XMLHttpRequest |
undefined |
iframe |
HTML4 上传 iframe 元素 |
Element |
undefined |