退货录入上传图片压缩

app/Http/Controllers/RejectedBillItemController.php

@@ -366,17 +366,20 @@ class RejectedBillItemController extends Controller
             $fileExtension=$file->getClientOriginalExtension();
 
             // 5.存储, 生成一个随机文件名
-            $fileName = date('ymd').'-'.Uuid::uuid1();//thumbnail common bulky
+            $fileName = date('ymd').'-'.Uuid::uuid1();
             $thumbnailName=storage_path('app/public/files/'.$fileName.'-thumbnail.'.$fileExtension);
             $commonName=storage_path('app/public/files/'.$fileName.'-common.'.$fileExtension);
             $bulkyName=storage_path('app/public/files/'.$fileName.'-bulky.'.$fileExtension);
             $result=move_uploaded_file ($tmpFile ,$bulkyName);
             if ($result){
-                $img=Image::make($bulkyName);
-                if ($img->height() > $img->width())
+                $img=Image::make($bulkyName)->resize(250,250);
+                if ($img->height() > $img->width()){
                     $img->heighten(250)->save($commonName);
-                else $img->widen(250)->save($commonName);
-                $img->heighten(28)->save($thumbnailName);
+                } else{
+                    $img->widen(250)->save($commonName);
+                    $img->widen(28)->save($thumbnailName);
+                }
+                if (file_exists($bulkyName)){unlink($bulkyName);}
                 /** @var UploadFile|\stdClass $uploadFile */
                 $uploadFile=new UploadFile([
                     "table_name"=>"rejected_bill_items",
@@ -385,9 +388,7 @@ class RejectedBillItemController extends Controller
                     "type"=>$fileExtension,
                     "file_name"=>$request->type??'',
                 ]);
-                if ($uploadFile->save())
-                    app('LogService')->log(__CLASS__,'退货详情图片上传',json_encode($request),Auth::user()['id']);
-                $res[] = $uploadFile;
+                if ($uploadFile->save()) $res[] = $uploadFile;
             }else $this->error("图片存储失败，检查服务器状态");
         }
         $this->success($res);
@@ -403,9 +404,9 @@ class RejectedBillItemController extends Controller
             $bulky=storage_path('app/public/'.$uploadFile->url.'-bulky.'.$uploadFile->type);
             $common=storage_path('app/public/'.$uploadFile->url.'-common.'.$uploadFile->type);
             $thumbnail=storage_path('app/public/'.$uploadFile->url.'-thumbnail.'.$uploadFile->type);
-            if (file_exists($bulky) && file_exists($common) && file_exists($thumbnail)){
-                unlink($bulky);unlink($common);unlink($thumbnail);
-            }
+            if (file_exists($bulky))unlink($bulky);
+            if (file_exists($common))unlink($common);
+            if (file_exists($thumbnail))unlink($thumbnail);
         }
         $query->delete();
         app('LogService')->log(__METHOD__,'退货商品详情图片删除',json_encode($request),Auth::user()['id']);

app/Services/RejectedBillItemService.php

@@ -24,17 +24,21 @@ class RejectedBillItemService
             $tmpFile = $file->getRealPath();
             if (!is_uploaded_file($tmpFile)) return 3;//文件错误
             $fileExtension = $file->getClientOriginalExtension();
-            $fileName = date('ymd') . '-' . Uuid::uuid1();//thumbnail common bulky
-            $thumbnailName = storage_path('app/public/files/' . $fileName . '-thumbnail.' . $fileExtension);
-            $commonName = storage_path('app/public/files/' . $fileName . '-common.' . $fileExtension);
-            $bulkyName = storage_path('app/public/files/' . $fileName . '-bulky.' . $fileExtension);
-            $result = move_uploaded_file($tmpFile, $bulkyName);
-            if ($result) {
-                $img = Image::make($bulkyName);
-                if ($img->height() > $img->width())
+
+            $fileName = date('ymd').'-'.Uuid::uuid1();
+            $thumbnailName=storage_path('app/public/files/'.$fileName.'-thumbnail.'.$fileExtension);
+            $commonName=storage_path('app/public/files/'.$fileName.'-common.'.$fileExtension);
+            $bulkyName=storage_path('app/public/files/'.$fileName.'-bulky.'.$fileExtension);
+            $result=move_uploaded_file ($tmpFile ,$bulkyName);
+            if ($result){
+                $img=Image::make($bulkyName)->resize(250,250);
+                if ($img->height() > $img->width()){
                     $img->heighten(250)->save($commonName);
-                else $img->widen(250)->save($commonName);
-                $img->heighten(28)->save($thumbnailName);
+                } else{
+                    $img->widen(250)->save($commonName);
+                    $img->widen(28)->save($thumbnailName);
+                }
+                if (file_exists($bulkyName)){unlink($bulkyName);}
                 /** @var UploadFile|\stdClass $uploadFile */
                 $uploadFile = new UploadFile([
                     "table_name" => "rejected_bill_items",

resources/views/rejected/create.blade.php

@@ -737,7 +737,7 @@
                 },
                 getImages(images) {
                     return images.map((item) => {
-                        return item.file;
+                        return item.src;
                     })
                 },
                 pasteImage(event,imageArray){
@@ -986,7 +986,6 @@
                 },
                 checkImageWhetherNeed(item){
                     if (this.billInputting.id_owner==4)return 0;//幼岚非必要上传外箱及产品图
-                    if (this.billInputting.id_owner==10 && item.id_quality_label==3)return 0;
                     if (item.id_quality_label!=1){
                         if (item.commodityImages.length===0){
                             tempTip.setDuration(3000);
@@ -998,19 +997,56 @@
                 },
                 setFormDataImage(formData, prefix, images) {
                     images.forEach((item) => {
-                        formData.append(`${prefix}[]`, item);
+                        formData.append(`${prefix}[]`, item,'rejected_bill_item.jpg');
                     });
                 },
+                compressedImage(_this,packageImages){
+                    let blobs=[];
+                    packageImages.forEach(function (imageFile){
+                        let docImg=document.createElement('img');
+                        docImg.src=imageFile;
+                        const { width: originWidth, height: originHeight } = docImg
+                        let maxWidth = 400;
+                        let maxHeight = 600;
+                        // 需要压缩的目标尺寸
+                        let targetWidth = originWidth
+                        let targetHeight = originHeight
+                        // 等比例计算超过最大限制时缩放后的图片尺寸
+                        if (originWidth > maxWidth || originHeight > maxHeight) {
+                            if (originWidth / originHeight > maxWidth / maxHeight) {
+                                targetWidth = maxWidth
+                                targetHeight = Math.floor(maxWidth * (originHeight / originWidth))
+                            } else {
+                                targetWidth = Math.floor(maxHeight * (originWidth / originHeight))
+                                targetHeight = maxHeight;
+                            }
+                        }
+                        const canvas = document.createElement('canvas')
+                        const context = canvas.getContext('2d')
+                        // 设置宽高度为等同于要压缩图片的尺寸
+                        canvas.width = targetWidth
+                        canvas.height = targetHeight
+                        context.clearRect(0, 0, targetWidth, targetHeight)
+                        //将img绘制到画布上
+                        context.drawImage(docImg, 0, 0, targetWidth, targetHeight)
+                        let image = canvas.toDataURL();
+                        let blob=_this.dataUrlToBlob(image);
+                        blobs.push(blob)
+                    });
+                    return blobs;
+                },
                 getDamagedFormData(item){
                     let _this=this;
                     let formData = new FormData();
                     if (item.packageImages.length>0){
                         let packageImages = _this.getImages(item.packageImages);
-                        this.setFormDataImage(formData,'packageImages',packageImages);
+                        let blobs=_this.compressedImage(_this,packageImages);
+                        this.setFormDataImage(formData,'packageImages',blobs);
                     }
                     if (item.commodityImages.length>0){
                         let commodityImages = _this.getImages(item.commodityImages);
-                        this.setFormDataImage(formData,'commodityImages',commodityImages);
+                        let blobs=_this.compressedImage(_this,commodityImages);
+                        this.setFormDataImage(formData,'commodityImages',blobs);
                     }
                     formData.append('barcode_goods',item.barcode_goods);
                     formData.append('amount',item.amount);
@@ -1038,6 +1074,7 @@
                         }
                     }
                     let formData = _this.getDamagedFormData(_this.itemInputting);
+
                     axios.post(url, formData,{'Content-Type':'multipart/form-data'}).then(function (response) {
                         _this.cleanError();
                         if (response.data.success === 'true') {
@@ -1295,11 +1332,13 @@
                                     _this.items.splice(i, 1);
                                 }
                             });
+                            _this.cleanItem();
                         } else {
+                            _this.cleanItem();
                             tempTip.show('删除失败，可尝试刷新页面再操作');
                         }
                     }).catch(function (response) {
-                        alert('连接错误：' + response);
+                        _this.cleanItem();
                         tempTip.show('删除失败，可尝试刷新页面!');
                     });
                 },
@@ -1515,7 +1554,7 @@
                     let isBtn = '@can('运输管理-运单-图片删除') true @endcan ';
                     for(let i=0;i<uploadFiles.length;i++){
                         let btn = isBtn ? "<button type='button' class='btn btn-sm btn-danger' onclick='vueList.btnDeleteImg(this)' data-url='"+uploadFiles[i].url+"' value='"+id+"' style='position: relative;float: right;margin-top: -30px;' >删除</button>" : "";
-                        let href = this.imgPrefix+uploadFiles[i].url+'-bulky.'+uploadFiles[i].type;
+                        let href = this.imgPrefix+uploadFiles[i].url+'-common.'+uploadFiles[i].type;
                         let src = this.imgPrefix+uploadFiles[i].url+'-common.'+uploadFiles[i].type;
                         div += "<div><a target='_blank' href='"+href+"'><img alt='#' src='"+src+"' style='position: relative;' ></a>"+btn+"</div>"
                     }

resources/views/rejected/edit.blade.php

@@ -833,7 +833,7 @@
                 },
                 getImages(images) {
                     return images.map((item) => {
-                        return item.file;
+                        return item.src;
                     })
                 },
                 pasteImage(event,imageArray){
@@ -878,19 +878,56 @@
                 },
                 setFormDataImage(formData, prefix, images) {
                     images.forEach((item) => {
-                        formData.append(`${prefix}[]`, item);
+                        formData.append(`${prefix}[]`, item,'rejected_bill_item.jpg');
                     });
                 },
+                compressedImage(_this,packageImages){
+                    let blobs=[];
+                    packageImages.forEach(function (imageFile){
+                        let docImg=document.createElement('img');
+                        docImg.src=imageFile;
+                        const { width: originWidth, height: originHeight } = docImg
+                        let maxWidth = 400;
+                        let maxHeight = 600;
+                        // 需要压缩的目标尺寸
+                        let targetWidth = originWidth
+                        let targetHeight = originHeight
+                        // 等比例计算超过最大限制时缩放后的图片尺寸
+                        if (originWidth > maxWidth || originHeight > maxHeight) {
+                            if (originWidth / originHeight > maxWidth / maxHeight) {
+                                targetWidth = maxWidth
+                                targetHeight = Math.floor(maxWidth * (originHeight / originWidth))
+                            } else {
+                                targetWidth = Math.floor(maxHeight * (originWidth / originHeight))
+                                targetHeight = maxHeight;
+                            }
+                        }
+                        const canvas = document.createElement('canvas')
+                        const context = canvas.getContext('2d')
+                        // 设置宽高度为等同于要压缩图片的尺寸
+                        canvas.width = targetWidth
+                        canvas.height = targetHeight
+                        context.clearRect(0, 0, targetWidth, targetHeight)
+                        //将img绘制到画布上
+                        context.drawImage(docImg, 0, 0, targetWidth, targetHeight)
+                        let image = canvas.toDataURL();
+                        let blob=_this.dataUrlToBlob(image);
+                        blobs.push(blob)
+                    });
+                    return blobs;
+                },
                 getDamagedFormData(item){
                     let _this=this;
                     let formData = new FormData();
                     if (item.packageImages.length>0){
                         let packageImages = _this.getImages(item.packageImages);
-                        this.setFormDataImage(formData,'packageImages',packageImages);
+                        let blobs=_this.compressedImage(_this,packageImages);
+                        this.setFormDataImage(formData,'packageImages',blobs);
                     }
                     if (item.commodityImages.length>0){
                         let commodityImages = _this.getImages(item.commodityImages);
-                        this.setFormDataImage(formData,'commodityImages',commodityImages);
+                        let blobs=_this.compressedImage(_this,commodityImages);
+                        this.setFormDataImage(formData,'commodityImages',blobs);
                     }
                     formData.append('barcode_goods',item.barcode_goods);
                     formData.append('amount',item.amount);
@@ -1079,11 +1116,13 @@
                                         _this.items.splice(i, 1);
                                     }
                                 });
+                            _this.cleanItem();
                         }else{
+                            _this.cleanItem();
                             tempTip.show('删除失败，可尝试刷新页面再操作');
                         }
                     }).catch(function (response) {
-                        alert('连接错误：'+response);
+                        _this.cleanItem();
                         tempTip.show('删除失败，可尝试刷新页面!');
                     });
                 },
@@ -1268,7 +1307,7 @@
                     let isBtn = '@can('运输管理-运单-图片删除') true @endcan ';
                     for(let i=0;i<uploadFiles.length;i++){
                         let btn = isBtn ? "<button type='button' class='btn btn-sm btn-danger' onclick='vueList.btnDeleteImg(this)' data-url='"+uploadFiles[i].url+"' value='"+id+"' style='position: relative;float: right;margin-top: -30px;' >删除</button>" : "";
-                        let href = this.imgPrefix+uploadFiles[i].url+'-bulky.'+uploadFiles[i].type;
+                        let href = this.imgPrefix+uploadFiles[i].url+'-common.'+uploadFiles[i].type;
                         let src = this.imgPrefix+uploadFiles[i].url+'-common.'+uploadFiles[i].type;
                         div += "<div><a target='_blank' href='"+href+"'><img alt='#' src='"+src+"' style='position: relative;' ></a>"+btn+"</div>"
                     }

resources/views/rejected/search/general.blade.php

@@ -310,7 +310,7 @@
                     let div = "";
                     let isBtn = '@can('运输管理-运单-图片删除') true @endcan ';
                     for(let i=0;i<uploadFiles.length;i++){
-                        let href = this.imgPrefix+uploadFiles[i].url+'-bulky.'+uploadFiles[i].type;
+                        let href = this.imgPrefix+uploadFiles[i].url+'-common.'+uploadFiles[i].type;
                         let src = this.imgPrefix+uploadFiles[i].url+'-common.'+uploadFiles[i].type;
                         div += "<div><a target='_blank' href='"+href+"'><img alt='#' src='"+src+"' style='position: relative;' ></a>"+"</div>"
                     }