用element-ui上传图片的方法,详细了解~
<el-upload
class="upload-demo"
action=""
ref="upload"
multiple
:limit="5"
:auto-upload='true'
:on-exceed="handleExceed"
:before-upload="beforeUpload"
:http-request="uploadFile"
:on-remove="handleRemove"
list-type="picture-card"
-preview="handlePictureCardP"
>
<i class="el-icon-plus"></i>
</el-upload>
- on-preview 点击文件列表中已上传的文件时的钩子 function(file)
- on-remove 文件列表移除文件时的钩子 function(file, fileList)
- on-success 文件上传成功时的钩子 function(response, file, fileList)
- on-error 文件上传失败时的钩子 function(err, file, fileList)
- on-progress 文件上传时的钩子 function(event, file, fileList)
- on-change 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 function(file, fileList)
- before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。function(file)
- before-remove 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。function(file, fileList)
- list-type 文件列表的类型 text/picture/picture-card
- auto-upload 是否在选取文件后立即进行上传
- file-list 上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]
- http-request 覆盖默认的上传行为,可以自定义上传的实现 function
- disabled 是否禁用
- limit 最大允许上传个数
- on-exceed 文件超出个数限制时的钩子 function(files, fileList)