Uploader


单个文件异步上传组件,支持预览本地图片。

示例
  1. <nut-uploader
  2. url=""
  3. :preview="true"
  4. @start="uploadStart"
  5. @progress="uploadProgress"
  6. @success="uploadSuccess"
  7. @failure="uploadFailure"
  8. @preview="uploadPreview"
  9. @afterChange="clearInput"
  10. @showMsg="errTip"
  11. >
  12. </nut-uploader>

  1. export default {
  2. methods:{
  3. uploadStart(){
  4. console.log('start');
  5. },
  6. uploadProgress(file, loaded, total){
  7. this.progress = '上传进度:'+loaded/total*100+'%';
  8. },
  9. uploadPreview(previewFile){
  10. this.preview ='本地预览图:<img src="'+previewFile+'" alt=""/>';
  11. },
  12. uploadSuccess(file, responseTxt){
  13. alert('上传成功!');
  14. },
  15. uploadFailure(file, responseTxt){
  16. alert('上传失败!');
  17. },
  18. clearInput(input,event){
  19. //change事件触发后,清空value值,选相同文件时可再次触发change事件
  20. input.value = '';
  21. },
  22. //此方法用于接收和处理组件内部抛出的错误信息,如所选文件大小超过限制、文件类型不正确等等
  23. errTip(msg){
  24. alert(msg);
  25. }
  26. }
  27. }
Props
参数说明类型默认值可选值
url上传地址String
preview是否开启预览Booleanfalse预览的是本地图片
maxSize上传最大限制(字节)Number5242880(5M)
acceptType支持上传的文件类型Array['image/jpeg', 'image/png', 'image/gif', 'image/bmp']
attach附加上传的信息Object{}需要随图片一起通过Request Payload发送的参数及值
Events
事件名说明回调参数
start上传开始时触发
progress上传进度file:文件;loaded:已上传字节;total:总字节
preview预览回调previewFile:预览的文件内容(base64)
success上传完成file:文件;responseTxt:服务端响应内容。注意:数据传输完毕(xhr.status === 200)即触发此函数,业务逻辑层面有没有上传成功,可能还需要根据responseTxt相关字段判断,具体由接口决定
failure上传进度file:文件;responseTxt:服务端响应内容。注意:数据传输层面失败(xhr.status !== 200)时触发此函数,业务逻辑层面的失败需要在success回调中根据相关字段判断,具体由接口决定
showMsg指定方法接收处理组件抛出的错误信息唯一参数为提示信息内容
afterChange原生change事件触发后执行input:原生Input;event:事件对象