H5 利用vue实现图片上传功能。
H5的上传图片如何实现呢？
以下是我用vue实现的图片上传功能，仅供参考。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>任务系统</title>
<script src="js/base.js"></script>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/inputImg.css">
<link rel="shortcut icon" href="#" />
<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/config.js"></script>
</head> <body>
<div id="app">
<textarea class='pingjiaContent' @input="descInput" maxlength='200' placeholder="请描述任务完成情况及截图" name="" id=""
cols="30" rows="4" v-model="desc">
</textarea>
<div class="imgBox">
<div class="uploadBox" v-for="(value, key) in imgs">
<img :src="getObjectURL(value)" alt="" class="uploadImg">
<img src="data:images/close.png" alt="" class="closeImg" @click='delImg(key)'>
</div>
<div class="inputButton">
<img src="data:images/add.png" alt="" class="addImg">
<input type="file" class="upload" @change="addImg" ref="inputer" multiple
accept="image/png,image/jpeg,image/gif,image/jpg" />
</div>
<div class="submitTask" @click="submit">
提交任务
</div>
<div class="back">
返回
</div>
</div>
</div> <script>
new Vue({
el: '#app',
data: {
formData: new FormData(),
imgs: {},
imgLen: 0,
txtVal: 0,
desc: "", },
created() { },
methods: {
descInput() {
// this.txtVal = this.desc.length;
},
addImg(event) {
let inputDOM = this.$refs.inputer;
// 通过DOM取文件数据
this.fil = inputDOM.files;
console.log(inputDOM.files)
let oldLen = this.imgLen;
for (let i = 0; i < this.fil.length; i++) {
let size = Math.floor(this.fil[i].size / 1024);
if (size > 5 * 1024 * 1024) {
alert('请选择5M以内的图片！');
return false
}
this.imgLen++;
this.$set(this.imgs, this.fil[i].name + '?' + new Date().getTime() + i, this.fil[i]);
console.log(this.imgs);
}
},
getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
},
delImg(key) {
this.$delete(this.imgs, key);
this.imgLen--;
},
// 提交上传图片
submit() {
console.log(this.imgs)
console.log(11)
for (let key in this.imgs) {
let name = key.split('?')[0];
console.log(this.imgs[key]);
this.formData.append(name, this.imgs[key]);
}
// $.ajax({
// url: '/material/uploadFile',
// type: 'POST',
// cache: false, //上传文件不需要缓存
// data: this.formData,
// processData: false, // 告诉jQuery不要去处理发送的数据
// contentType: false, // 告诉jQuery不要去设置Content-Type请求头
// success: function (data) { // },
// error: function (data) { // }
// })
},
}
});
</script>
</body> </html>
html,
body {
width: 100%;
height: 100%;
font-family: "微软雅黑";
background: #F8F8F8 !important;
} #box {
width: 100%;
position: relative;
height: 100%;
} .pingjiaContent {
width: 100%;
border-radius: 0.1rem;
/* border: 1px solid #CACACA; */
padding: 0.2rem;
box-sizing: border-box;
outline: none;
margin-bottom:;
border: none;
resize: none;
} .uploadBox {
width: 2rem;
height: 2rem;
position: relative;
margin-right: 0.15rem;
margin-bottom: 0.35rem;
} .uploadImg {
width: 100%;
height: 100%;
overflow: hidden;
} .closeImg {
width: 0.5rem;
height: 0.5rem;
position: absolute;
top: 2%;
right: 1%;
} .inputButton {
width: 2rem;
height: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid #cdcdcd;
position: relative;
margin-right: 0.15rem;
margin-bottom: 0.35rem;
} .addImg {
width: 1.2rem;
height: 1.2rem;
} .upload {
width: 100%;
height: 100%;
opacity:;
position: absolute;
top:;
left:;
z-index:;
} .imgBox {
width: 100%;
background: #fff;
display: flex;
align-items: center;
flex-wrap: wrap;
padding-bottom: 0.5rem;
box-sizing: border-box;
padding: 0.5rem;
} .submitTask {
background: #EF504D;
width: 100%;
height: 0.8rem;
color: #fff;
font-size: 0.32rem;
line-height: 0.8rem;
text-align: center;
border-radius: 0.1rem;
margin-top: 0.8rem;
} .back {
background: #F7F7F7;
width: 100%;
height: 0.8rem;
color: #4D4D4D;
font-size: 0.32rem;
line-height: 0.8rem;
text-align: center;
border-radius: 0.1rem;
margin-top: 0.4rem;
border: 1px solid #E0E0E0;
}
后台PHP只需要利用 获取到接收的文件即可实现上传。
H5 利用vue实现图片上传功能。的更多相关文章
- vue 图片上传功能
这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix"> ...
- [Ting's笔记Day8]活用套件carrierwave gem:（3）Deploy图片上传功能到Heroku网站
前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...
- 前端丨如何使用 tcb-js-sdk 实现图片上传功能
前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...
- thinkphp达到UploadFile.class.php图片上传功能
片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇（七）图片上传功能
日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...
- PHP语言学习之php做图片上传功能
本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...
- 给DEDECMS广告管理中增加图片上传功能
dedecms的广告管理功能稍微有点次,本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自己的dedecms版本下载对应的编码然后解压把里面的文件放在后台目录覆盖即可 ...
- [Ting's笔记Day6]活用套件carrierwave gem:（1）在Rails实现图片上传功能
carrierwave是一款经典的图片上传套件,本篇的目标是先在本地端(development)的rails项目试成功gem. (预计中集的进度会练习怎么利用Amazone S3架设图片上传Host, ...
- JavaScript实现单张图片上传功能
前台jsp代码 <%@ page language="java" pageEncoding="UTF-8" contentType="text/ ...
随机推荐
- 【转】python测试框架--doctest
转自https://my.oschina.net/lionets/blog/268542 doctest 是一个 Python 发行版自带的标准模块.有两种模式可供使用. ##1 doctest 的概 ...
- redis源码分析(一)-sds实现
redis支持多种数据类型,sds(simple dynamic string)是最基本的一种,redis中的字符串类型大多使用sds保存,它支持动态的扩展与压缩,并提供许多工具函数.这篇文章将分析s ...
- golang微服务框架go-micro 入门笔记2.1 micro工具之micro api
micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.s ...
- Vuecli3
第一步安装 npm install -g @vue/cli 第二步关于项目配置 因为cli3去除了cli2中index.html 转而存到了publi文件中 如果需要配置跨域 页面入口 打包文件路径都 ...
- Spring Boot整合Mybatis完成级联一对多CRUD操作
在关系型数据库中,随处可见表之间的连接,对级联的表进行增删改查也是程序员必备的基础技能.关于Spring Boot整合Mybatis在之前已经详细写过,不熟悉的可以回顾Spring Boot整合Myb ...
- sqlserver还原差异备份
因为之前遇到还原差异备份,最开始遇到SQLServer报错:"无法还原日志备份或差异备份,因为没有文件可用于前滚".查阅很多资料后,终于得到解决.收集整理成这篇随笔. 问题原因:出 ...
- exchange From Middle English eschaunge
exchange From Middle English eschaunge, borrowed from Anglo-Norman eschaunge exchange 1.An act of ex ...
- weblogic unable to get file lock问题
非正常结束weblogic进程导致weblogic无法启动 由于先前服务器直接down掉了,所有进程都非正常的进行关闭了,也就导致了下次启动weblogic的时候报了以下错误: <2012-3- ...
- 基于 Express + MySQL + Redis 搭建多用户博客系统
1. 项目地址 https://github.com/caochangkui/node-express-koa2-project/tree/master/blog-express 2. 项目实现 Ex ...
- C#操作mongodb（聚合函数）-分组找出每组的最大值
public static void OnQuery_QXData(string DBName, string tablename,string layername) { ...