美文网首页
Quasar Uploader

Quasar Uploader

作者: alue | 来源:发表于2023-05-13 22:02 被阅读0次

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);  
    }  
}

相关文章

网友评论

      本文标题:Quasar Uploader

      本文链接:https://www.haomeiwen.com/subject/lfuusdtx.html