非图片文件如何显示预览图标
默认支持非图片文件的预览图标,效果可以接受。同时,可以看到文件名的前面一部分。
限制接受的文件类型
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 聊聊, 查看更多联系方式