做微信网页版图片上传的时候遇到了一个问题,微信截图可以上传,保存下来或是拍照的图片不能上传,最后发现是图片格式的问题
以往图片上传都是‘jpeg、jpg、png、gif’这样的格式都能上传,但是微信网页内图片上传时,其它格式都能上传,只有jpeg后缀的图片不能上传,晕死
解决办法:判定后缀是否为jpeg,如果是,重新建一个上传文件对象,传入名字,格式就可以了
如:
var afile;
const file = $("#fileimg").get(0).files[0];if(file.type.indexOf('jpeg') != -1){
afile = new File([file], new Date().getTime()+".jpg", {type: 'image/jpg'});
}else{
afile = file;
}
图片上传压缩图片大小
1 // 压缩版
2 function uploadImg(formId, filename, showimg){
3 var file;
4 var inputImgUrl = $("#img").val();
5 var afile = $("#fileimg").get(0).files[0];
6
7 if(['jpeg', 'png', 'gif', 'jpg'].indexOf(afile.type.split("/")[1])<0){
8 toastr.error("请上传图片格式文件")
9 return;
10 }
11
12 if(afile.type.indexOf('jpeg') != -1){
13 file = new File([afile], new Date().getTime()+".jpg", {type: 'image/jpg'});
14 }else{
15 file = afile;
16 }
17
18 var formData = new FormData();
19
20 if(file.size/1024 > 1025) { //大于1M,进行压缩上传
21 photoCompress(file, 640, function(base64Codes){
22 var blob = convertBase64UrlToBlob(base64Codes);
23 formData.append("file", blob, file.name);
24 console.log("将blob对象转成formData对象:" + file.name);
25 UploadImgAjax(formData,inputImgUrl,showimg);
26 });
27 }else{
28 formData.append("file", file);
29 UploadImgAjax(formData,inputImgUrl,showimg);
30 }
31 }
32
33 /*
34 三个参数
35 file:一个是文件(类型是图片格式),
36 w:一个是文件压缩的后宽度,宽度越小,字节越小
37 objDiv:一个是容器或者回调函数
38 photoCompress()
39 */
40 function photoCompress(file,w,objDiv){
41 var ready=new FileReader();
42 /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
43 ready.readAsDataURL(file);
44 ready.onload=function(){
45 var re=this.result;
46 canvasDataURL(re,w,objDiv)
47 }
48 }
49 function canvasDataURL(path, w, callback){
50 var newImage = new Image();
51 var quality = 0.6; //压缩系数0-1之间
52 newImage.src = path;
53 newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要
54 var imgWidth, imgHeight;
55
56 newImage .onload = function(){
57 imgWidth = this.width;
58 imgHeight = this.height;
59 //生成canvas
60 var canvas = document.createElement("canvas");
61 var ctx = canvas.getContext("2d");
62 if (imgWidth > w) {
63 canvas.width = w;
64 canvas.height = w * imgHeight / imgWidth;
65 }else {
66 canvas.width = imgWidth;
67 canvas.height = imgHeight;
68 quality = 0.6;
69 }
70 ctx.clearRect(0, 0, canvas.width, canvas.height);
71 ctx.fillStyle = "#fff";
72 ctx.fillRect(0, 0, canvas.width, canvas.height);
73 ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
74 var base64 = canvas.toDataURL("image/jpeg", quality);//压缩语句
75
76 //回调函数返回base64的值
77 callback(base64);
78 }
79 }
80
81 /**
82 * 将以base64的图片url数据转换为Blob
83 * @param urlData
84 * 用url方式表示的base64图片数据
85 */
86 function convertBase64UrlToBlob(urlData){
87 var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
88 bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
89 while(n--){
90 u8arr[n] = bstr.charCodeAt(n);
91 }
92 return new Blob([u8arr], {type:mime});
93 }
94
95 function UploadImgAjax(formData,inputImgUrl,showimg){
96 $.ajax({
97 url: 上传图片接口,
98 type: 'POST',
99 data: formData, // 上传formdata封装的数据
100 dataType: 'JSON',
101 cache: false, // 不缓存
102 processData: false, // jQuery不要去处理发送的数据
103 contentType: false, // jQuery不要去设置Content-Type请求头
104 success:function (ret) { //成功回调
105 var img = ret.pic;
106 if(inputImgUrl){
107 inputImgUrl += "," + ret.pic;
108 }else{
109 inputImgUrl = ret.pic;
110 }
111 $('.'+showimg).before("<span><i class='omit'></i><img src='"+img+"'/></span>");
112 $('#img').val(inputImgUrl);
113 },
114 error: function(){
115 console.log("error");
116 toastr.error(ret.message);
117 }
118 });
119 }
View Code
后续增加删除上传过的图片
<div class="attach-mypic mlr05">
<span class="add">
<img src="{{ BootstrapHelper.getStaDomain() }}images/kacommunity/icon/Upload-picture.png">
<input type="file" name="fileimg" id="fileimg" class="fileupload" onchange="uploadImg('imgform', 'fileimg', 'add')" value="" accept="image/*">
</span>
</div>
$(".attach-mypic").on("click", ".omit", function(){
var imgVal=$("#img").val(),thisImgUrl = $(this).siblings("img")[0].src,tempUrlArr=imgVal.split(",");
for(var i=0;i<tempUrlArr.length;i++){
if(tempUrlArr[i] == thisImgUrl){
tempUrlArr.splice(i, 1);
imgVal = tempUrlArr.join(",");
$(this).parent().remove();
$('#img').val(imgVal);
return ;
}
}
});
View Code
在网上找了个兼容版本的,但是在ios上图片没有压缩,先把代码放上,有时间再测试(此版代码压缩没有效果,如需要压缩图片,用上面的版本)
1 const imgFile = {};
2 var inputImgUrl = $("#img").val();
3 function uploadImg(formId, filename, showimg){
4 var afile;
5 const file = $("#fileimg").get(0).files[0];
6 const imgMasSize = 1024
7
8 if(['jpeg', 'png', 'gif', 'jpg'].indexOf(file.type.split("/")[1])<0){
9 toastr.error("请上传图片格式文件")
10 return;
11 }
12
13 if(file.type.indexOf('jpeg') != -1){
14 afile = new File([file], new Date().getTime()+".jpg", {type: 'image/jpg'});
15 }else{
16 afile = file;
17 }
18
19 // if(file.size/1024 > 1025){
20 // alert("太大了");
21 // }
22
23 if(!!window.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
24 transformFileToFormData(afile);
25 return;
26 }
27
28 transformFileToDataUrl(afile);
29
30 }
31
32 function transformFileToFormData(file){
33 const formData = new FormData();
34
35 formData.append('type', file.type || "image/jpg");
36
37 formData.append('size', file.size);
38
39 formData.append('name', file.name);
40
41 formData.append('lastModifiedDate', file.lastModifiedDate);
42
43 formData.append('file', file);
44
45 // uploadImg(formData);
46 UploadImgAjax(formData);
47 }
48
49 function transformFileToDataUrl(file){
50 const imgCompassMaxSize = 1024;
51
52 imgFile.type = file.type || 'image/jpg';
53 imgFile.size = file.size;
54 imgFile.name = file.name;
55 imgFile.lastModifiedDate = file.lastModifiedDate;
56
57 const reader = new FileReader();
58
59 reader.onload = function(e){
60 const result = e.target.result;
61
62 if(result.length < imgCompassMaxSize){
63 compress(result, processData, false);
64 }else{
65 compress(result, processData);
66 }
67 };
68
69 reader.readAsDataURL(file);
70 }
71
72 // 使用canvas绘制图片并压缩
73 function compress (dataURL, callback, shouldCompress = true) {
74 const img = new window.Image();
75
76 img.src = dataURL;
77
78 img.onload = function () {
79 const canvas = document.createElement('canvas');
80 const ctx = canvas.getContext('2d');
81
82 canvas.width = img.width;
83 canvas.height = img.height;
84
85 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
86
87 let compressedDataUrl;
88
89 if(shouldCompress){
90 compressedDataUrl = canvas.toDataURL(imgFile.type, 0.2);
91 } else {
92 compressedDataUrl = canvas.toDataURL(imgFile.type, 1);
93 }
94
95 callback(compressedDataUrl);
96 }
97 }
98
99 function processData (dataURL) {
100 // 这里使用二进制方式处理dataURL
101 const binaryString = window.atob(dataURL.split(',')[1]);
102 const arrayBuffer = new ArrayBuffer(binaryString.length);
103 const intArray = new Uint8Array(arrayBuffer);
104 const imgFile = this.imgFile;
105
106 for (let i = 0, j = binaryString.length; i < j; i++) {
107 intArray[i] = binaryString.charCodeAt(i);
108 }
109
110 const data = [intArray];
111
112 let blob;
113
114 try {
115 blob = new Blob(data, { type: imgFile.type });
116 } catch (error) {
117 window.BlobBuilder = window.BlobBuilder ||
118 window.WebKitBlobBuilder ||
119 window.MozBlobBuilder ||
120 window.MSBlobBuilder;
121 if (error.name === 'TypeError' && window.BlobBuilder){
122 const builder = new BlobBuilder();
123 builder.append(arrayBuffer);
124 blob = builder.getBlob(imgFile.type);
125 } else {
126 // Toast.error("版本过低,不支持上传图片", 2000, undefined, false);
127 throw new Error('版本过低,不支持上传图片');
128 }
129 }
130
131 // blob 转file
132 const fileOfBlob = new File([blob], imgFile.name, {type: "image/jpg"});
133 const formData = new FormData();
134
135 // type
136 formData.append('type', imgFile.type);
137 // size
138 formData.append('size', fileOfBlob.size);
139 // name
140 formData.append('name', imgFile.name);
141 // lastModifiedDate
142 formData.append('lastModifiedDate', imgFile.lastModifiedDate);
143 // append 文件
144 formData.append('file', fileOfBlob);
145 console.log(formData);
146
147 // uploadImg(formData);
148 UploadImgAjax(formData);
149 }
150
151 function UploadImgAjax(formData){
152 $.ajax({
153 url: '/community/upload',
154 type: 'POST',
155 data: formData, // 上传formdata封装的数据
156 dataType: 'JSON',
157 cache: false, // 不缓存
158 processData: false, // jQuery不要去处理发送的数据
159 contentType: false, // jQuery不要去设置Content-Type请求头
160 success:function (ret) { //成功回调
161 var img = ret.pic;
162 if(inputImgUrl){
163 inputImgUrl += "," + ret.pic;
164 }else{
165 inputImgUrl = ret.pic;
166 }
167 $('.add').before("<span><i class='omit'></i><img src='"+img+"'/></span>");
168 $('#img').val(inputImgUrl);
169 },
170 error: function(){
171 console.log("error");
172 toastr.error(ret.message);
173 }
174 });
175 }
View Code