首先是样式: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. ASP.Net Mvc实现自定义User Identity用户身份识别系统(2)

    上一篇博文中已经实现了如何在页面上使用自定义的属性即上篇博文所示的@this.U,今天将进一步研究用户自定义User Identity; 实现思路: 通过研究微软自带identity的套路,我们可以发 ...

  2. K2制作流程

    K2流程制作注意事项 1:分析需求 2:实施 步骤1:绘制流程图 步骤2:添加datafield[必备:ActJumped  IsPass] 步骤3:添加线规则(如下图所示,在添加完毕规则之后,再给同 ...

  3. js动态生成层方法 不懂得加QQ 2270312758

    我们在WEB开发时,很多时候往往需要我们 JavaScript 来动态建立 html 元素,动态的设置相关的属性.比方说我们想要建立一个 div 层,则可以使用以下代码实现.一.直接建立 functi ...

  4. [C#] C# 与 Nessus 交互,动态构建扫描任务计划

    C# 与 Nessus 交互,动态构建扫描任务计划 目录 什么是 Nessus? 创建会话类 NessusSession 登录测试 创建操作类 NessusManager 操作测试 什么是 Nessu ...

  5. oracle非正常退出后重启实例

    sqlplus /nolog 回车 conn / as sysdba 回车 startup 回车(如果被告知已启动,应先执行 shutdown immediate 回车)

  6. NLog组件

    接触.net项目的同志们都清楚,最初在项目中记录日志常用的是log4net日志组件,随着.net框架的不对优化升级,最近新流行的日志框架nlog,下面我就对nlog组件说说自己的认知: 下载 通过Nu ...

  7. 自己实现的TypeOf函数2

    自己实现的typeOf函数:返回传入参数的类型 主要用于解决,js自带的typeof返回结果不精确:Ext JS中typeOf对字符串对象.元素节点.文本节点.空白文本节点判断并不准确的问题 与上一篇 ...

  8. Basic Linux Privilege Escalation

    (Linux) privilege escalation is all about: Collect - Enumeration, more enumeration and some more enu ...

  9. nginx常用场景

    1.浏览器缓存 server { listen 8083; server_name 127.0.0.1; sendfile on; access_log /var/log/nginx/static_s ...

  10. url获取整理

    $_SERVER['DOCUMENT_ROOT'];   //网站的根目录 echo $_SERVER['SERVER_NAME']; //当前的服务器域名 echo $_SERVER['HTTP_H ...