Quasar 提供了一个便捷的文件上传组件 Uploader.
在常见的文件选择组件的基础上,Uploader 能够约束文件个数/大小/类型,能够给出文件预览,上传状态。
缺点是,Uploader 的上传代码是内部封装了的,无法复用自己封装的 axios 对象。 因此在大多数情况下,需要指定配置参数 headers
,实现身份验证,以及解析response响应。
常见的用法如下:
<q-uploader
flat
multiple
auto-upload
hide-upload-btn
:url="env.url + url.upload"
:headers="headers"
accept=".jpg, image/*"
field-name="file"
@uploaded="uploaded"
/>
const env = getEnv();
const headers = [
{
name: 'authorization',
value: (LocalStorage.getItem('token') as string) || '',
},
];
interface Info {
files: any;
xhr: XMLHttpRequest;
}
interface Response {
code: string;
data: string;
msg: string;
}
function uploaded({ xhr }: Info) {
const { data: file } = JSON.parse(xhr.response) as Response;
if (file) {
model.attachment.push(file);
}
}
网友评论