楚河之界 2022-03-01 14:21 采纳率: 100%
浏览 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 数学的三元一次方程求解
  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题