热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue+weui+FormData+XMLHttpRequest实现图片上传功能

首先是样式:https:weui.io#uploader在weui示例中可以看到是用以下方法进行选择图片<inputmultiple>$uploaderInput$("#uploaderInput");$uploaderInput.on("change&

首先是样式:https://weui.io/#uploader

在weui示例中可以看到是用以下方法进行选择图片


  

 $uploaderInput = $("#uploaderInput");
 $uploaderInput.on("change", function(e){
            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
            for (var i = 0, len = files.length; i 

 由于俺们用的vue,所以改造一下子


 在相关vue实例中加入如下方法

uploadInpuChange: function (e) {
            let src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files, self = this;
            for (var i = 0, len = files.length; i           self.imgs.push({ url: "background-image: url(" + src + ")"});//这个src为一种。。啥类型来着,自个F12瞅瞅
                //添加到数组
                filesAry.push({
                    file: file
                })
            };
        }

 最后是展示

  •  然后捏,就可以在此基础上做任何扩展操作啦,例如限制图片类型,数量鸭

     

    最后是提交图片,先全添加进formdata中

     let formdata = new FormData();
        filesAry.forEach(function (obj) {
            if (obj.file != null) {
                formdata.append('files', obj.file);//原项目一般回附带其他参数类型然后遍历做相关判断再添加
            }
        })
    

      

    然后使用XMLHttpRequest对象进行提交

    let xhr = new XMLHttpRequest();
        xhr.open('POST', location.href, true);
        xhr.send(formdata);
        xhr.Onload= function (event) {
            if (xhr.status >= 200 && xhr.status <300 || xhr.status == 304) {
                console.log(xhr.responseText);
             //okay
            }
            else {
            //no okay
            }
        };
    

      

    我采取的是一次性全部提交,也可以依照这个改造为一个个提交

     


    推荐阅读
    • 如何实现织梦DedeCms全站伪静态
      本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ... [详细]
    • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
    • 个人学习使用:谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ... [详细]
    • Python瓦片图下载、合并、绘图、标记的代码示例
      本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
    • 本文介绍了django中视图函数的使用方法,包括如何接收Web请求并返回Web响应,以及如何处理GET请求和POST请求。同时还介绍了urls.py和views.py文件的配置方式。 ... [详细]
    • Imtryingtofigureoutawaytogeneratetorrentfilesfromabucket,usingtheAWSSDKforGo.我正 ... [详细]
    • 解决nginx启动报错epoll_wait() reported that client prematurely closed connection的方法
      本文介绍了解决nginx启动报错epoll_wait() reported that client prematurely closed connection的方法,包括检查location配置是否正确、pass_proxy是否需要加“/”等。同时,还介绍了修改nginx的error.log日志级别为debug,以便查看详细日志信息。 ... [详细]
    • SpringMVC接收请求参数的方式总结
      本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
    • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
    • 图像因存在错误而无法显示 ... [详细]
    • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
    • 文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议(超文本传输协议)是用于从WWW服务 ... [详细]
    • sklearn数据集库中的常用数据集类型介绍
      本文介绍了sklearn数据集库中常用的数据集类型,包括玩具数据集和样本生成器。其中详细介绍了波士顿房价数据集,包含了波士顿506处房屋的13种不同特征以及房屋价格,适用于回归任务。 ... [详细]
    • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
      本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
    • 本文讨论了编写可保护的代码的重要性,包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法,如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道,如不规范的命名、重复代码、过长的函数和参数列表等。最后,介绍了如何处理数据泥团和进行函数重构,以提高代码质量和可维护性。 ... [详细]
    author-avatar
    蓝俊明伟伦淑舜
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有