KA冉KA 2022-03-16 17:09 采纳率: 34.4%
浏览 38
已结题

angular中当不使用input的change事件时,如何把图片以文件流的形式向后端传值

一般我们使用上传图片或文件功能:
<input id="inpFile" type="file" class="file-input-opacity" (change)="$onInputFile($event)">
通过$onInputFile方法获取到文件的信息。

当不使用这种方法,有一张图片(含有名称,类型,大小等),如何以文件流的形式传给后端呢?
<input id="inpFile" type = "button" value = "获取图片" (click)="TakePhoto();" />
<button class="btn btn-primary" (click)="onFinish($event)">确定
通过TakePhoto方法获取到图片信息,然后点击onFinish方法,传给后端(以上传文件的形式)

形式如下:

img

img

  • 写回答

1条回答 默认 最新

  • KA冉KA 2022-03-16 18:33
    关注

    https://blog.csdn.net/weixin_43448394/article/details/83120013
    如何将html转化为图片并将该图片以文件流的形式传送到后台
    技术环境:vue html2canvas
    总体思路:将html---->图片的base64位的形式----->将base64转化为文件流---->传送给后台
    逐步解析:
    step1:
    将html转化为图片
    我用vue开发,
    首先npm install html2canvas
    html部分:

    <div class="imageWrapper" ref="canvastoImage">
      <img class="real_pic" :src="dataURL" />
      <slot></slot>
    </div>
    
    

    js部分:

    methods: {
    toImage() {
      html2canvas(this.$refs.canvastoImage,{
        backgroundColor: null
      }).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        this.dataURL = dataURL;
       });
     }
    }
    

    step:将base64转化为文件流

    this.dataURL = dataURL;
    

    这里dataURL的值就是this.$refs.canvastoImage所取到的dom元素转化成图片的base64位的形式;
    我们再将图片的base64转化为文件流;
    方法一:

    function dataURItoBlob(dataURI) {
        var byteString = atob(dataURI.split(',')[1]);
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], {type: mimeString});
    }
    
    > 该方法引用https://blog.csdn.net/hsany330/article/details/52575459?utm_source=blogxgwz6
    
           方法二:
           function dataURLtoFile(dataurl, filename) {//将base64转换为文件  
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],  
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);  
        while(n--){  
            u8arr[n] = bstr.charCodeAt(n);  
        }  
        return new File([u8arr], filename, {type:mime});  
    }  
    

    https://blog.csdn.net/baidu_29701003/article/details/80494704 (方法二原文链接)
    step3:就是将转化成文件流的图片以FormData的形式发送到后台,
    step:最后有个小小的坑,当时是用这个保存图片的时候在本地环境下用new Files的形式后台是可以接受到的,但是在测试环境下试了很多次都不行,但是用new Blob()后台却可以成功的接受图片;

    我使用的场景是:
    .....
    let base64Data = new Uint8Array('448588');
    // base64Data: [0,0,0,0,0,0,0,0,0,......]
    // 在此处使用了 new File()
    this.fileList = new File([base64Data], 'bule.jpg', {type: 'image/jpg'});
    // 这时的this.fileList就是截图上所需要的格式了
    .......

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月21日
  • 已采纳回答 3月16日
  • 创建了问题 3月16日

悬赏问题

  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题:做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证?(详解)
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥20 想用ollama做一个自己的AI数据库
  • ¥15 关于qualoth编辑及缝合服装领子的问题解决方案探寻
  • ¥15 请问怎么才能复现这样的图呀