日常使用文件上传方式,都是通过input type='file'的文件选择框进行文件上传。但是会通过其他交互方式等到图片的base64格式进行上传。具体情况如下示意:

在项目开发中,需要进行照片采集,通过摄像头直接拍照采集到人脸数据,再上传到后台进行保存。照片采集插件,返回的人脸数据是base64格式的字符串,因此前端需要把图片数据转换为后台可以接收的方式进行上传。

1、照片采集接口返回数据格式。其中,param.image字段为接口返回的采集照片的base64数据格式。

command: "GetImageRet"
param: {
image: "/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5P…………………………2Q=="
status: 0}
requestId: "201905131557726753000"

页面代码:

<el-form-item label="人脸照路径" prop="facePicPath" style="width: 98%">
  <el-input style="width: 80%;float: left;" :disabled="dialogStatus=='view'" v-model="form.facePicPath" placeholder="请输入人脸照路径"></el-input>
<span style="width: 20%;float: left;">
   <el-button @click="getFaceInfoFun('form')" style="background: #408FD8;color: #fff;border: 1px solid #408FD8;margin-left: 5px;">人脸采集</el-button>
</span>
</el-form-item>

JS事件:

       getFaceInfoFun(){  // 人脸采集
const requestId = curTimeFun(1,'-1') + Date.parse(new Date());
const param = {command: 'GetImage', requestId: requestId};
const _that = this;
$.ajax({
type: 'post',
data: JSON.stringify(param),
url: _that.deviceUrl,
success: function(data) {
let imgBase='data:image/gif;base64,' + JSON.parse(data).param.image;
let blob= dataURLtoFile(imgBase,'image/jpeg');
_that.submitPic(blob);
},
error: function(rsp) {
_that.$notify({title: '异常', message: "操作异常,请联系管理员", dangerouslyUseHTMLString: true, type: 'warning', duration: 0});
}
});
},
 //将base64转换为blob
export function dataURLtoFile(dataURI, type) {
let binary = atob(dataURI.split(',')[1]);
let array = [];
f
or(let i = 0; i < binary.length; i++) {
6 array.push(binary.charCodeAt(i));
7 }
8 return new Blob([new Uint8Array(array)], {type:type });

9 }
 // 图片提交事件。把bold格式转为formData格式进行提交。
submitPic(fileData){
let form = new FormData();
form.append("bizType","9");
let fileOfBlob = new File([fileData], new Date()+'.jpg'); // 重命名了
form.append("file", fileOfBlob);
// form.append("file",fileData); // 不重命名
const _that = this;
$.ajax({
type: 'post',
data:form,
url: _that.actionUrl,
processData:false,
contentType:false,
success: function(data) {
if(data.status == 200){
Vue.set(_that.form,'facePicPath',data.data);
} else {
_that.$notify({title: '异常', message: data.message, dangerouslyUseHTMLString: true, type: 'warning', duration: 0});
}
},
error: function(rsp) {
_that.$notify({title: '异常', message: "操作异常,请联系管理员", dangerouslyUseHTMLString: true, type: 'warning', duration: 0});
}
});
},

数据上传格式:

照片采集接口提交和响应:

   

照片上传接口接口提交和响应:

    

图片base64格式转为file文件类型上传方法的更多相关文章

  1. Django 批量保存图片文件 自定义上传方法

    1.前端通过formData的方式批量增加图片或文件 for (var i = 0; i < form_img_list.length; i++) { formData.append('imag ...

  2. html file 文件批量上传 以及碰到的一些问题提

    //javascript 代码 $("#submite").click(function (evt) { var arrayTr = $("#datatables&quo ...

  3. mac svn .a文件的上传方法

    1.首先确认是否安装了Command Line Tools,如果没有,就Xcode-Preference-Downloads,选择Command Line Tools-install就可以了 2.打开 ...

  4. Nodejs如何把接收图片base64格式保存为文件存储到服务器上

    app.post('/upload', function(req, res){ //接收前台POST过来的base64 var imgData = req.body.imgData; //过滤data ...

  5. 将图片base64格式转换为file对象并读取(两种方式读取)

    两种方式读取,一种URL.createObjectURL,另一种fileReader   var base64 = ` data:image/jpeg;base64,/9j/4AAQSkZJRgABA ...

  6. Nodejs接收图片base64格式保存为文件

    base64的形式为“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0....”:当接收到上边的内容后,需要将data ...

  7. input文件类型上传,或者作为参数拼接的时候注意的问题!

    1.ajax请求参数如果为文本类型,直接拼接即可.如果为file类型就需要先获取文件信息 2.获取文件信息: HTML代码: <div class="form-group"& ...

  8. Web文件上传方法总结大全

    1. 表单上传 这是传统的form表单上传,使用form表单的input[type=”file”]控件,可以打开系统的文件选择对话框,从而达到选择文件并上传的目的,它的好处是多浏览器兼容,它是web开 ...

  9. struts—文件的上传和下载

    设计了一个小的案例:上传图片到服务器,上传成功后显示图片列表,然后点击下载上传到服务器的图片. 注意表单的配置属性: <form enctype="multipart/Form-dat ...

随机推荐

  1. JQuery调用WCF服务,部署在iis

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...

  2. STL源代码剖析 容器 stl_stack.h

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie stack ---------------------------------------- ...

  3. BNU 13259.Story of Tomisu Ghost 分解质因子

    Story of Tomisu Ghost It is now 2150 AD and problem-setters are having a horrified time as the ghost ...

  4. QT 4.53 for VS2005 编译包

    最近学QT,装了QT5,结果打开下载的项目(特别是那些书的源代码)有很多兼容性问题.于是又下载4.83,都是4版本系列的,应该会好很多吧,但居然也是这样.于是看了一下时间,觉得4.53于2009年底发 ...

  5. 怎样动态设置GridView的宽和高(Android)

    LinearLayout.LayoutParams linearParams2 = (LinearLayout.LayoutParams)liveGrid.getLayoutParams(); lin ...

  6. Android5.0 Recovery源代码分析与定制(一)【转】

    本文转载自:http://blog.csdn.net/morixinguan/article/details/72858346 版权声明:本文为博主原创文章,如有需要,请注明转载地址:http://b ...

  7. .NET通用基本权限系统框架源代码

    DEMO下载地址: http://download.csdn.net/detail/shecixiong/5372895 一.开发技术:B/S(.NET C# ) 1.Windows XP以上 (支援 ...

  8. hdu 1075(字典树)

    What Are You Talking About Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 102400/204800 K ...

  9. Codeforces--630C--Lucky Numbers(快速幂)

     C - Lucky Numbers Crawling in process... Crawling failed Time Limit:500MS     Memory Limit:65536K ...

  10. operator[] 重载

    #include <iostream>#include <vector>#include <string> class Assoc {    struct Pair ...