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

项目部分功能实现

作者: 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