由于之前都用剪裁,所以需要将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">ဆ</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});
};
})
}