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

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

<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple/>

  

 $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 < len; ++i) {
var file = files[i]; if (url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
} $uploaderFiles.append($(tmpl.replace('#url#', src)));
}
});

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

<input @change="uploadInpuChange($event)" class="weui-uploader__input" type="file" accept="image/*" multiple=""/>

 在相关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 < len; ++i) {
var file = files[i];
if (url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
          self.imgs.push({ url: "background-image: url(" + src + ")"});//这个src为一种。。啥类型来着,自个F12瞅瞅
//添加到数组
filesAry.push({
file: file
})
};
}

最后是展示

<li  v-for="img in imgs" class="weui-uploader__file a-fadein" v-bind:style="img.url"></li>

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

最后是提交图片,先全添加进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
}
};

  

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

vue+weui+FormData+XMLHttpRequest 实现图片上传功能的更多相关文章

  1. 使用FormData数据做图片上传: new FormData() canvas实现图片压缩

    使用FormData数据做图片上传: new FormData()       canvas实现图片压缩 ps: 千万要使用append不要用set   苹果ios有兼容问题导致数据获取不到,需要后台 ...

  2. H5 利用vue实现图片上传功能。

    H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...

  3. vue 图片上传功能

    这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下:   <ul class="clearfix">   ...

  4. thinkphp达到UploadFile.class.php图片上传功能

    片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...

  5. Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能

    日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...

  6. PHP语言学习之php做图片上传功能

    本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...

  7. [Ting's笔记Day8]活用套件carrierwave gem:(3)Deploy图片上传功能到Heroku网站

    前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...

  8. 给DEDECMS广告管理中增加图片上传功能

    dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...

  9. 前端丨如何使用 tcb-js-sdk 实现图片上传功能

    前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...

随机推荐

  1. windows共享文件夹

    net share 查看本地共享文件夹 我们想要删除这些链接,删除所有的共享目录链接命令是: net use * /d 如果只是想删除单个共享目录的链接,那么命令是: net use \\主机名或IP ...

  2. 从零开始学安全(四十四)●TCP三次握手四次挥手

    wireshark:Beyond Compare是一个网络封包分析软件.网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料.Wireshark使用WinPCAP作为接口,直接与 ...

  3. 学JAVA第十七天,接口与抽象方法

    JAVA接口可以让代码更加有合理的规范性,就想一个项目小组,组长要负责把成员的代码整合,但是每个成员写的方式都是按照他们自己的想法来写的, 所以,整合起来就非常麻烦. 但是,如果我们的组长制作了一个接 ...

  4. Linux IO模型(同步异步阻塞非阻塞等)的几篇好文章

    聊聊同步.异步.阻塞与非阻塞聊聊Linux 五种IO模型聊聊IO多路复用之select.poll.epoll详解 ​

  5. js之制作简易红绿灯

    HTML代码: 在一个div容器内,设置3个span <body> <div id="i1"> <span class="light red ...

  6. 从零开始搭建服务器部署web项目

    前言 该教程旨在完整描述建站过程,会将博主踩过的坑尽量详细的罗列出来.整个建站流程相对较为庞大,因此做了分解,同时适合大家有针对性的查询感兴趣的部分. 一.如何拥有自己的云服务器. 二.域名的购买与解 ...

  7. SQL 知道字段名 全表搜索此字段属于哪个表

    SELECT name FROM sysobjects WHERE id IN (SELECT ID FROM syscolumns WHERE name='字段名')

  8. Navicat 进行数据库自动备份

    今天经历一次数据库丢库事件,顿时觉得定时备份数据库很重要. 但是每天自己手动备份实在是太麻烦了,于是乎,想到用计划任务进行每天定时自动备份. 发现Navicat自带就有备份  还可以直接计划任务,贼方 ...

  9. [JSOI2008]Blue Mary的旅行

    嘟嘟嘟 看\(n\)那么小,就知道是网络流.然后二分,按时间拆点. 刚开始我看成所有航班一天只能起飞一次,纠结了好一会儿.但实际上是每一个航班单独考虑,互不影响. 建图很显然,拆完点后每一个点的第\( ...

  10. git 本地代码冲突解决,强制更新

    git reset soft,hard,mixed之区别深解 git reset --hard  强制更新覆盖本地   GIT reset命令,似乎让人很迷惑,以至于误解,误用.但是事实上不应该如此难 ...