zoukankan      html  css  js  c++  java
  • 将base64的图片转换成file对像上传

    我们一般上传图片是二进制,但是有时候我们拿到的图片是base64的,这个时候原有的上传接口就不支持啦

    // 常用的
    <input type='file' />

      

    //  如果是base64 的啦 如何转换成file对像 使用原有的接口上传啦
    base64ToFile(data) {
            
          // 将base64 的图片转换成file对象上传 atob将ascii码解析成binary数据
              let binary = atob(data.split(',')[1]);
              let mime = data.split(',')[0].match(/:(.*?);/)[1];
              let array = [];
              for (let i = 0; i < binary.length; i++) {
                array.push(binary.charCodeAt(i));
              }
              let fileData = new Blob([new Uint8Array(array)], {
                    type: mime,
                  });
    
              let file = new File([fileData], `${new Date().getTime()}.png`, { type: mime });
    
          return file;
    
    }

    // 一般来说这个时候拿到 base64ToFile 返回的file对象给到上传接口就可以啦,
    // 这里的表单需要你自己处理一下

     

      // 构造表单

      
    // 构造表单 示例
    let formData = new FormData();
    formData.append('key', path); // path 路径
    formData.append('OSSAccessKeyId', OSSAccessKeyId); // OSSAccessKeyId
    formData.append('Signature', Signature); // Signature
    formData.append('expire', expire);  // expire
    formData.append('policy', policy); // policy
    formData.append('file', file, file.name);
    
    axios.post(url, formData).then(res => {
        // res 里面应该有一个远程的url地址,就是你上传的图片资源服务器后返回的地址
    })
    

      

  • 相关阅读:
    vc++操作mysql数据库的技巧
    [翻译]用表单字段加亮的方式为用户提供友好的界面
    设计方法开篇
    周末之个人杂想(五)
    ComponentArt对Atlas的集成
    [翻译]使用ASP.NET2.0的ReportViewer查看RDLC报表
    [视频讲解]GridView里做链接实现新闻列表到详细内容页的跳转
    关于正则表达式
    周末之个人杂想(七)

  • 原文地址:https://www.cnblogs.com/wtfu/p/12790245.html
Copyright © 2011-2022 走看看