webuploader 上传 到oss图片无法预览（直接选取图片不剪裁版）

由于之前都用剪裁，所以需要将base64转为file文件格式，才能被oss读取到

input file上传的正确图片文件格式：

对的oss格式

错的oss格式

否则图片会打不开

var imgdata = []//上传图片
var indexs;


//上传图片
$(document).on('change','[data-role="hwUploadimg"]',function(input){
	let uploadfile = input.currentTarget.files[0];
	$(this).val('');
	if(!uploadfile){
		return;
	}
	var filetype = uploadfile.type.split(".")[0];
	if (!window.FileReader) {
		errorMsg('该浏览器不支持文件上传');
	}
	var imgfile = {};
	let images;
	let _this = this;
	if (window.FileReader) {
		var reader = new FileReader();
		reader.readAsDataURL(uploadfile);
		reader.onloadend = function() {
			imgfile = uploadfile;
			let html = '';
			html =  '<div style="width:84px;height:84px">'+
						'<img src="'+this.result+'" width="100%" height="100%"/>'+
						'<i class="layui-icon" data-del="delimg" style="cursor:pointer">&#x1006;</i>'+
					'</div>';
			let imageSize = getImgeData(this.result);
			images = {
				width:imageSize.width,
				height:imageSize.height,
				file:imgfile,
				fileid:''
			};
			imgdata.push(images);
			imgdata.push(uploadfile.name);
			$('[data-role="hwupload1"]').hide();
			$('[data-role="hwupload"]').show();
			$('[data-role="hwupload"]').html(html);	
		}
	}
});	
	
	
	
上传到阿里云oss-获取fileid保存文件接口-获取文件路径
function uploadOss(ossData,host) {
	$.ajax({
		url: host,
		data: ossData,
		processData: false,
		cache: false,
		async: false,
		contentType: false,
		type: 'post',
		progress: function (value) {
			layer.msg(value);
		},
		success: function (res) {
			console.log('阿里云上传结束');
			if (res.success) {
				var filedata = {
					"filename":res.filename,
					"signature":res.signature,
					"width":imgdata.width,
					"height":imgdata.height,
					"size":res.size,
					"db":'1',
					"md5":'',
					"mimeType":res.mimeType
				}
				$.post('/service/oss/savefile',filedata,function(data,status){
					problemsaves(data.path);
				})
			} 
		}
	});
}



获取图片签名
function uploadFile(file){
	var osssignature = get_signature('feedbackimage');
	if(!osssignature){
	    layer.alert("获取云签名出错，请重试");
	    return;
	}
	var host = osssignature['host'];
	var dir = osssignature['dir'];
	var ossData = new FormData();
	var newimgdata = imgdata[1];
	ossData.append("key",dir + '/' + WebUploader.Base.guid('v') + newimgdata.substr(newimgdata.lastIndexOf(".")));
	ossData.append("policy",osssignature['policy']);
	ossData.append("OSSAccessKeyId",osssignature['accessid']);
	ossData.append("success_action_status",'200');
	ossData.append("signature",osssignature['signature']);
	ossData.append("callback",osssignature['callback']);
	ossData.append('file',file);//需要上传的文件 file 这个
	uploadOss(ossData,host);//上传oss
}



签名地址
function send_request(type){
    var xmlhttp = null;
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    } else if (window.ActiveXObject){
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp!=null){
        var serverUrl = '/service/oss/' + type + 'signature';
        xmlhttp.open( "GET", serverUrl, false );
        xmlhttp.send( null );
        return xmlhttp.responseText;
    }else{
        layer.alert("Your browser does not support XMLHTTP.");
    }
}

function get_signature(type){
    body = send_request(type)
    var obj = eval ("(" + body + ")");
    return obj;
}



提交按钮
$(document).on('click','[data-role="submit"]', function(){
	if(imgdata != ''){
		for(let data of imgdata){
			if(data.file){
				uploadFile(data.file);
			}
		}
	}else{
		problemsaves('');
	}
})		


提交接口
function problemsaves(url){
	indexs = layer.load(2,{shade: [0.5,'#fff']});
	var froms = getUrlParam('from');
	var userid = getUrlParam('userid');
	var description = $('[name="PRMDESC"]').val();
	var concacts  = $('[name="CONTACTS"]').val();
	if(!description){
		layer.msg('请描述您遇到的问题');
		layer.close(indexs);
		return;
	}
	var problemsavedata = {
		'description':description,
		'concacts':concacts,
		'userid':userid,
		'from':froms,
		'images':[url]
	}
	$.post('/service/product/problemsave',problemsavedata,function (res) {
		if(res.success){
			layer.close(indexs);
			layer.msg('反馈提交成功');
			$('[name="PRMDESC"]').val('');
			$('[name="CONTACTS"]').val('');
			$('[data-role="hwupload"]').hide();
			$('[data-role="hwupload1"]').show();
			imgdata = [];//清空数组
		}else{
			layer.close(indexs);
			layer.msg('反馈提交失败');
		}
	})
}
	
	

获取上传图片文件的相关信息
function getImgeData(result) {
	return new Promise(function (resolve) {
		var image = new Image();
		image.src = result;
		image.onload = function () {
			resolve({width:this.width,height:this.height});
		};
	})
}