移动网页端使用 Vue Vant 组件上传文件

更新日期: 2019-12-01 阅读次数: 214 字数: 287 分类: VueJS

非图片文件如何显示预览图标

默认支持非图片文件的预览图标,效果可以接受。同时,可以看到文件名的前面一部分。

移动网页端使用 Vue Vant 组件上传文件

限制接受的文件类型

accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx"

限制上传的单个文件大小

max-size 文件大小限制,单位为 byte。

默认超出文件大小时,没有任何提示。但是该组件在文件超出大小时,会触发 oversize 事件。

模板中设置文件大小上限,并添加事件监听:

<van-uploader
        :max-size=10485760
        @oversize="prompt_for_oversize"
/>

js vue 方法中添加对应方法:

prompt_for_oversize: function(file) {
  vant.Dialog.alert({
    message: 'File size should be less than 10M.',
    confirmButtonText: "OK"
  }).then(() => {
    // on close
  });
},

上传接口链接如何配置

利用文件读取完成后的回调函数: after-read。

模板配置

<van-uploader
	v-model="file_list"
	multiple
	accept=".jpg,.gif,.png,.jpeg,.txt,.pdf,.doc,.docx,.xls,.xlsx"
	:max-count="5"
	:max-size=10485760
	@oversize="prompt_for_oversize"
	:after-read="after_read"
/>

JS 方法:

after_read: function(file) {
  var formData = new FormData();
  var that = this;
  formData.append('file', file.file);

  $.ajax({
    url : "/api/upload_file",
    type : 'POST',
    data : formData,
    processData: false,
    contentType: false,
    success : function(data) {
      that.files.push({
        url: data,
        name: file.file.name
      });
    }
  });
},

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天工地搬砖,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2019年12月09日 "一二九"运动纪念日
2019年12月09日 世界足球日
2019年12月10日 世界人权日
2019年12月12日 西安事变纪念日
2019年12月13日 南京大屠杀
2019年12月20日 澳门回归日
2019年12月21日 国际篮球日
2019年12月22日 冬至
2019年12月24日 平安夜
2019年12月25日 圣诞节
查看更多节日