原生jquery app上传图片二维码

原生jquery app上传图片二维码

fm:

实现商家自己上传二维码的功能

html部分

 <img id="pic" src="" >
            <input id="upload" name="file" accept="image/*" type="file" style="display: none"/>

js部分：这里就是点击图片上传区域 ，选择图片后获取到图片的路径发送请求，后台就会把这个图片路径存储

      $("#pic").click(function () {
            $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
            $("#upload").on("change",function(){
            var file = this.files[0] ;
            var formFile = new FormData();
                formFile.append("file", file);
                 //获取图片的路径，该路径不是图片在本地的路径
            if (file) {
         //将图片路径存入src中，显示出图片
            $.ajax({
                type: "POST",
                url:"/api/common/upload",
                //后台接口
                data:formFile,
                dataType: "json",
                 //上传文件无需缓存
                 cache: false,
                    //用于对data参数进行序列化处理 这里必须false
                    processData: false,
                    //必须
                    contentType: false,
                success: function(res){
                    $("#pic").attr("src", res.data.show_url); 
                    var code=res.data.url
                    // $("#pic").css("opacity","1")
                    // $("#pic").css("z-index","-1111")
                    // // $("#upload").css(" dispaly","none")
                    // $(".dd").css("opacity","0")


                request({
                    url: '/api/index/savePaymentCode',
                    data:{code},
                    success: function(res) {
                        console.log(res.data);
                        window.location.reload()
                    },
                    error: function(res) {
                        open_spare({
                            type: 'fail',
                            close: false,
                            tip: res.msg
                        })
                    }
            })            
                },      
            });
            }
            });
            });

然后每次初始化页面的时候就会请求接口 判断返回的数据中有没有这个url

  request({
            url: '/api/index/paymentcode',
            data: {},
            success: function(res) {
                console.log(res)
                let img = res.data.url
                if (img=="") {
                //  $(".qrcode-img").append("<div class='aa'>请上传图片</div>")
                //  $('.qrcode-img').html('<input type="file" class="input-upload"/>')
                //  $(".aa").on("click",function(res){
                    // getadd()
                //  })
                }else{
                    $("#pic").attr("src", res.data.url); 
                }
            },
            error: function(res) {
                open_spare({
                    type: 'fail',
                    close: false,
                    tip: res.msg
                })
            }
        })