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

更新日期: 2019-12-01 阅读次数: 2603 字数: 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
      });
    }
  });
},

爱评论不评论

近期节日

2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
2020年05月01日 国际劳动节
2020年05月04日 五四青年节
2020年05月05日 立夏
查看更多节日