移动网页端使用 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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式