美文网首页
项目部分功能实现

项目部分功能实现

作者: MrYang_b51b | 来源:发表于2019-08-01 10:11 被阅读0次

    1、导出excile,但是后台返回时二进制数据流,在前台要进行处理。

    axios({

            method: 'GET',

            url: '/api',

            params: params,

            responseType: 'blob'

          }).then(res=>{

            let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});

            let url = window.URL.createObjectURL(blob);

            window.location.href = url;

          }).catch(err=>{

            console.log(err)

          })

    2、less中使用calc的问题

    Less的好处不用说大家都知道,确实让写CSS的人不在痛苦了,最近我在Less里加入calc时确发现了有点问题,我在Less中这么写:

      div {

      width : calc(100% - 30px);

      }

      结果Less把这个当成运算式去执行了,结果给我解析成这样:

      div {

      width: calc(70%);

      }

      于是,我把Less改写成这样:

      div {

      width : calc(~"100% - 30px");

      }

      解析结果正常:

      div {

      width: calc(100% - 30px);

      }

      然而,把30px替换为一个变量,怎么写呢?

      div {

      @diff : 30px;

      width : calc(~"100% - " + @diff);

      }

      这么写Webstorm没有报错,但grunt-less报错了:

      C:\Users\zhong\WebstormProjects\test>grunt less

      Running "less:development" (less) task

      >> ParseError: Unrecognised input in style.less on line 4, column 2:

      >> 3    @diff : 30px;

      >> 4    width : calc(~"100% - " + @diff);

      >> 5 }

      Warning: Error compiling style.less Use --force to continue.

      Aborted due to warnings.

      于是这么写:

      div {

      @diff : 30px;

      width : calc(~"100% - " @diff);

      }

      顺利编译过去,但Webstorm却老是提示语法错误,虽然也能编译但看着文件有一个错误提示心里老感觉不爽,找半天也没发现Webstorm如何调试语法提示错误设置

      于是,改成如下写法:

      div {

      @diff : 30px;

      width : calc(~"100% - @{diff}");

      }

    3、使用ajax上传图片,base64格式上传

    function sendImg(event){

                if($(".upload-img")[0].files.length){

                    var img = $(".upload-img")[0];

                    var imgFile = new FileReader();

                    var imgData=""

                    imgFile.readAsDataURL(img.files[0]);

                    imgFile.onload = function () {

                        imgData = this.result; //base64数据  

                        $.ajax("<?=Url::to(["repair/upload"])?>", {

                            method: "post",

                            data:{

                                file:imgData

                            },

                            success:function(res){

                                $('.repair-image').eq(tuIndex).attr('src',JSON.parse(res).img);

                                img_arr[tuIndex] = JSON.parse(res).img;

                                $.hideLoading();

                            },

                            fail:function(){

                                $.hideLoading();

                            },

                            error:function(){

                                $.hideLoading();

                            }

                        });

                    }

                }

            }

    相关文章

      网友评论

          本文标题:项目部分功能实现

          本文链接:https://www.haomeiwen.com/subject/ehofdctx.html