楚河之界 2022-03-01 14:21 采纳率: 97.4%
浏览 171
已结题

原生js上传插件，上传图片问题！

https://www.jq22.com/jquery-info22747
上面是我使用的一个上传插件。
使用场景：选择图片，点击提交按钮，上传到服务器。
遇到的问题是：我上传了正确的图片，点击提交按钮的时候，会执行if里（正常应该执行else里的）。也就是说我上传框的图片没问题，但是也alert。
这个问题在PC端重现不出来，只在手机和ipad偶尔出现过，所以不知道怎么调试。

submitInfo: function() {
        var that = this
        var img1 = ''
        var img2 = ''
        var imgList = []
        // 判断上传框为空，或者上传非图片文件
        if (!this.cupload1.uploadInput.files[0] ||
          !this.cupload2.uploadInput.files[0] ||
          !this.cupload1.uploadInput.files[0].base64 ||
          !this.cupload2.uploadInput.files[0].base64) {
          alert("请上传图片")
          return;
        } else {
          img1 = this.cupload1.uploadInput.files[0].base64;
          img2 = this.cupload2.uploadInput.files[0].base64;
          imgList = [
            {
              fileSuffix: this.cupload1.uploadInput.files[0].fileSuffix,
              fileData: img1,
            },
            {
              fileSuffix: this.cupload2.uploadInput.files[0].fileSuffix,
              fileData: img2,
            },
          ]
        }
        var paramsObj = JSON.stringify({
          params: {
            idAttatchments: imgList
          }
        })
        $.ajax({
          type: "POST",
          url: "XXXX",
          contentType: "application/json;charset=UTF-8",
          data: paramsObj,
          success: function (data) {
            that.deleteImg()
            if (data.resultStatus === 'NORMAL') {
              that.step = 'second'
            } else {
              alert(data.message);
              return;
            }
          },
        })
      },
  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-03-01 14:30
    关注

    直接改获取dom中的预览图片数据来验证即可。

    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>cupload例子</title>
</head>
<body>
    <p>图片1</p>
    <div id="cupload-1"></div>
    <p>图片2</p>
    <div id="cupload-2"></div>
    <input type="button" onclick="obj.submitInfo()" value="开始上传" />

    <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://www.jq22.com/demo/cupload202001100928/static/js/cupload.js"></script>
    <script>

        var obj = {
            cupload1: new Cupload({ ele: '#cupload-1' }),
            cupload2: new Cupload({ ele: '#cupload-2' }),
            submitInfo: function () {
                var ul = $('ul.cupload-image-list'), img = ul.find('img');
                if (img.length != ul.length) {//图片容器和预览图片不一致（预览图片为选择图片未生成），所以只需要判断图片数量和容器是否一致就能知道是否选了图片
                    alert("请上传图片")
                    return
                }
                imgList = []
                img.each(function () {
                    var arr = this.src.split(';base64,');
                    var fileSuffix = arr[0].split('/').pop().toLowerCase();
                    if (fileSuffix == 'jpeg') fileSuffix = 'jpg';
                    var item = {
                        fileSuffix: fileSuffix,
                        fileData: arr[1],
                        id: 'id不太清楚怎么命名的'
                    }
                    imgList.push(item);
                });

                console.log(imgList)
                var paramsObj = JSON.stringify({
                    params: {
                        idAttatchments: imgList
                    }
                });


                $.ajax({
                    type: "POST",
                    url: "XXXX",
                    contentType: "application/json;charset=UTF-8",
                    data: paramsObj,
                    success: function (data) {
                        that.deleteImg()
                        if (data.resultStatus === 'NORMAL') {
                            that.step = 'second'
                        } else {
                            alert(data.message);
                            return;
                        }
                    },
                })
            }
        }
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
    1人已打赏
查看更多回答(3条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 3月4日
  • 已采纳回答 3月1日
  • 创建了问题 3月1日

悬赏问题

  • ¥15 为啥画版图在Run DRC会出现Connect Error？可我Calibre的hostname和计算机的hostname已经设置成一样的了。
  • ¥20 网站后台使用极速模式非常的卡
  • ¥20 Keil uVision5创建project没反应
  • ¥15 mmseqs内存报错
  • ¥15 vika文档如何与obsidian同步
  • ¥15 华为手机相册里面的照片能够替换成自己想要的照片吗？
  • ¥15 陆空双模式无人机飞控设置
  • ¥15 sentaurus lithography
  • ¥100 求抖音ck号 或者提ck教程
  • ¥15 关于#linux#的问题：子进程1等待子进程A、B退出后退出(语言-c语言)