美文网首页
Quasar 上传头像

Quasar 上传头像

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

Quasar框架最大的价值是能够低成本的开发跨平台应用。
例如,一个常见的上传图片的需求。在web中,一般就是就是打开本地文件路径;而在手机端,则要打开摄像头拍照或者从照片库中上传图片。

Quasar 则集成了 capacitor 插件,开发者使用相同的函数,插件会根据平台的不同,自动完成相应的功能。在网页版时,下述代码会直接打开本地文件浏览器,在手机端,则会调用摄像头和照片库。

import { Camera, CameraResultType } from '@capacitor/camera';
async function captureImage() {  
    const image = await Camera.getPhoto({  
    quality: 90,  
    allowEditing: true,  
    resultType: CameraResultType.Base64,  
    });  
      
    if (!image.base64String) return;  
      
    const base64Data = image.base64String;  
    // 将照片转换为 Blob 对象  
    const byteCharacters = atob(base64Data);  
    const byteNumbers = new Array(byteCharacters.length);  
      
    for (let i = 0; i < byteCharacters.length; i++) {  
    byteNumbers[i] = byteCharacters.charCodeAt(i);  
    }  
      
    const byteArray = new Uint8Array(byteNumbers);  
    const blob = new Blob([byteArray], { type: 'image/jpeg' });  
      
    const formData = new FormData();  
    formData.append('file', blob);  
      
    const { data } = await request.put<string>(url.avatar, formData);  

}

相关文章

  • 「免费开源」基于Vue和Quasar的前端SPA项目crudap

    基于Vue和Quasar的前端SPA项目实战之文件上传(十) 回顾 通过之前一篇文章 基于Vue和Quasar的前...

  • 图片上传与ajax打包form里面的数据

    目录 头像上传的前端处理 头像上传的后端处理 ajax打包form里面的数据 1. 头像上传的前端处理 需求: 效...

  • 移动端上传头像

    上传头像

  • 纯前端实现截图生成头像

    上传头像插件 目的: 帮助开发者快速开发上传头像功能点 背景: 现在b,g能搜到的头像上传插件并不太好用,所以想提...

  • 开发经验总结

    1.头像上传功能 1.拍照或从相册选择, 头像上传。 头像修改成功之后,需要把头像image保存到沙盒。 每次页面...

  • 上传头像

    背景 在小米的面试中,最后一轮被问到了一个场景。即关于在 WebView 下开发一个用户上传头像的场景的完整流程。...

  • 上传头像

    在 User 类中增加字段: 注意:数据库中 user_image 中存储的是图片的路径,而非文件实体,所以数据类...

  • 上传头像

    //创建button和imageView -(void)createUI{ _headImageView = [F...

  • 上传头像

    NSString *base64string=[imagedata base64Encoding];

  • 头像上传

    https://cnodejs.org/topic/51fc8bd944e76d216ab64939

网友评论

      本文标题:Quasar 上传头像

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