图片原图尺寸上传服务器并预览原图的最优解决方案是什么

不吃渔

本司要求原图上传图片到服务器，并预览图片原图尺寸。请问有无最佳方案。

现遇到上传服务器之前的大小为2mb,预览图片打印为5mb。请问为何如此，如何规避这个问题。
功能要求小图是为缩略图展示，上传时为原图，放大查看为原图，保存下载为原图尺寸。请帮忙排错

<div class="descBox noBorder">
            <div class="descTitle">
                <div class="box_flex_between">
                    <div>相关图片</div>
                    <div><span id="num">{{imgArr.length}}</span>/9</div>
                </div>
            </div>
            <div class='item'>
                <div class='box_flex_wrap'>
                    <div class="photo" v-for="(imgObj,imgIndex) in imgArr" @click="prveImg(imgObj)">
                        <img mode="aspectFill"
                            :src="imgObj.url == ''? 'static/image/no_img.jpg' : base_app_url_images + imgObj.url +'_resize_?w='+thumbWidth">
                        <div class='delete-photo' v-if="imgObj.url !== ''" @click.stop="deletePicture(imgIndex)">
                        </div>
                    </div>
                    <div class="photo addPicture" v-if="imgArr.length<9" @click="addPicture()"></div>
                </div>
            </div>
        </div>





addPicture: function () {
                        var _this = this
                        openThumb(function (res) {
                            if (res) {
                                uploadFile(res, function (files) {
                                    _this.imgArr.push({
                                        uid: files.data[0].uid,
                                        url: files.data[0].url
                                    })
                                })
                            }
                        })
                    },


  prveImg: function (obj) {  //预览图片
                        if (obj.url !== '') {
                            var img = base_app_url_images + obj.url
                            prev_pictures([img], 0, true)
                        }
                    },





function openThumb(callback){
    api.actionSheet({
            title: '请选择上传图像的方式',
            buttons: ['拍照','相册']
    },function( ret, err ){
        if(ret){
                    if(ret.buttonIndex==1){
                    var type='camera';
                    }
                    else if(ret.buttonIndex==2){
                    var type='album';
                    }
                    else{
                    callback(false);
                    return;
                    }
                    if(type=='camera'){
                    opWithPermission('camera',function(re){
                    if(re)
                        api.getPicture({
                            sourceType : type,
                            encodingType : 'jpg',
                            mediaValue : 'pic',
                            destinationType : 'url',
                            allowEdit : true,
                            quality : 100,
                            // targetWidth : 750,
                            // targetHeight : 840,
                            saveToPhotoAlbum : false
                        }, function(ret, err) {
                            if (ret) {
                                var image_path=ret.data;
                                console.log(ret.width,ret.height,image_path,'上传前拍照图片的尺寸')
                                callback(image_path);
                            }else{
                                callback(false);
                            }
                        })
                    else
                        callback(false);
                    })
                }
                else{
                    api.getPicture({
                        sourceType : type,
                        encodingType : 'jpg',
                        mediaValue : 'pic',
                        destinationType : 'url',
                        allowEdit : true,
                        quality : 100,
                        // targetWidth : 750,
                        // targetHeight : 840,
                        saveToPhotoAlbum : false
                    }, function(ret, err) {
                        if (ret) {
                            var image_path=ret.data;
                            console.log(ret.width,ret.height,image_path,'上传前拍照图片的尺寸')
                            callback(image_path);
                        }else{
                            callback(false);
                        }
                    })
                }
        }                  
    });
}











function prev_pictures(img,index,isSuoLue=false){
        console.log(img[0],'测试服务器的图片大小')
        var UIPhotoViewer = api.require('UIPhotoViewer');
        var temImg=[];
        showProgress()
        for(var i=0;i<img.length; i++)
            (function(i){
            api.imageCache({
                url: img[i],
                thumbnail: isSuoLue ? false : true  //false不缩略查看true缩略查看
            }, function(ret, err) {
                temImg[i] = ret.url;
                if(i==img.length-1){
                    UIPhotoViewer.open({
                        images: temImg,
                        activeIndex:index ? index :0,
                        placeholderImg: 'widget://html/static/image/loading.jpg',
                        bgColor: '#000'
                    }, function(ret, err) {
                        if (ret) {
                            hideProgress()
                            if(ret&&ret.eventType=='show'){
                                api.toast({
                                    msg: '温馨提示：长按图片即可保存',
                                    duration: 2000,
                                    location: 'top'
                                });
                                photoShow=true  
                                api.addEventListener({name: 'keyback',extra:{slidBackIntercept:false}}, function(ret, err) {
                                    if(photoShow){
                                    UIPhotoViewer.close();
                                    photoShow=false
                                    }else
                                    api.closeWin()
                                });
                            }
                            if(ret&&ret.eventType=='click'){
                                UIPhotoViewer.close();
                                photoShow=false
                            }
                            if(ret&&ret.eventType=='longPress'){
                                opWithPermission('storage',function(re){
                                    if(re){
                                        api.saveMediaToAlbum({
                                            path: img[ret.index]
                                        }, function(ret, err) {
                                            if (ret && ret.status) {
                                                toast('保存成功');
                                            } else {
                                                toast('保存失败');
                                            }
                                        });
                                    }
                                })
                            }
                            //alert(JSON.stringify(ret));
                        } else {
                            hideProgress()
                            //alert(JSON.stringify(err));
                        }
                    });
                }
            });
            })(i);
        
    }

至高吾·尚

根据你的需求，在一般的项目开发中，这些都是需要后端去做的事情。前端仅负责将原图上传就OK了，然后后端用过相关的功能插件去实现不同尺寸的缩略图，并记录相关的静态url地址，在具体的api接口中，按需求返回符合要求的图片的url地址，前端进行展示即可。
个人提供2中方式，1是使用第三方的oss，oss具备根据需求生成不同尺寸url的功能，具体去相关的第三方oss查看，另一种就是上传自己的业务服务器，然后端技术去实现（就是上面我说的那种方式）

您的问题是应用开发问题，不属于平台技术方面的问题，以上仅是个人的建议，仅供参考。

chyd④④⑤⑤②⑦⑧⑤②

这种建议直接使用oss