1.理解后端图片处理方法一：图片以独立文件的形式存放在服务器上的指定文件夹中，然后保存路径进入数据库字段二：将图片转成blob，直接存放在图片类型字段中数据库的（这种方法太繁琐，不推荐）blob(binarylargeobject)binarylargeobject2.第一个前端直接存储将路径赋值给src属性可以很方便的显示，前端发起get之后请求，后端可以直接返回服务器中的图片地址3.第二类文件是以二进制流方式传输图像并显示图像详细说明的形式的输入标签文件类型。它提供上传文件的功能。通过这种类型，可以将文件上传到服务器。formData对象可以异步上传二进制文件formData文件FileReader对象可以异步读取二进制文件FileReader文件1.HTML结构2.js定义了一个上传图片的函数，可以在本地显示functionuploadImg(){varfileObj=document.getElementById("FileUpload").文件[0]；//js获取文件对象varreads=newFileReader();if(typeof(fileObj)=="undefined"||fileObj.size<=0){//判断是否有图片被选中$.messager.alert('Prompt',"请选择图片");返回;}varformFile=newFormData();佛rmFile.append("action","UploadVMKImagePath");formFile.append("file",fileObj);//添加字段和对应的值vargUpImgUrl=constructURL(upApiKey,"upload");//这一步是构造访问地址vardata=formFile;$.ajax({url:gUpImgUrl,data:data,type:"Post",dataType:"json",headers:{//token验证不添加token:sessionStorage.getItem("token"),},cache:false,//上传文件不缓存processData:false,//用于序列化数据参数，此处必须为falsecontentType:false,//必须为success:function(result){$.messager.alert('prompt',"上传成功");if(result.code==0){//这里是你成功后的回调，发送成功后可以在本地显示reads.readAsDataURL(fileObj);//将文件对象读入base64，放入读取后直接进入srcreads.onload=function(e){document.getElementById(id).src=this.result;};}},});}3。从服务器获取二进制流的图片文件，显示本地文件信息，fileReader可以直接读取为base64显示，但是后端获取的二进制流blob可能无法读取为临时的usingcreateObjectURLurlcreateObjectURLdocumentfunctiongetImg(param,id){//这里没有使用ajax，出现问题的时候使用了ajax，所以使用了nativerequestvar_url;_url=RequestUrl.constructURL("CUSTOMERS","getimg",param);varxhr=newXMLHttpRequest();xhr.open('GET',_url,true);xhr.responseType="blob";xhr.setRequestHeader("token",sessionStorage.getItem("token"));xhr.onload=function(){if(this.status==200){varblob=this.回复;..//处理业务逻辑varimg=document.getElementById(id);img.onload=function(e){//元素的onload事件触发后，会销毁URL对象，释放内存。window.URL.revokeObjectURL(img.src);};//浏览器允许URL.createObjectURL()方法为Blob对象生成临时URL。//这个URL以blob:开头，表示它对应一个Blob对象。img.src=window.URL.createObjectURL(blob);}};xhr.发送();};
