在用这块代码前需要在主页面index引入<script src="http://at.alicdn.com/t/font_kfbh2nlnqrrudi.js"></script>

html:

这里需要引入:import EXIF from 'exif-js'  Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展

   <div v-if="question.question_type==5" class="finnalPicture">{{p_index+}}.{{question.question_title}}<span style="color:red;" v-show="question.required==true">*</span></div>
<div v-if="question.question_type==5" class="addQuestion">
<div class="editArea">
<li v-for="item in imgObj[p_index]" class="imgItem" :style="{backgroundImage: 'url(' + item + ')' }" @click="deleteImg(item,p_index)"></li>
<div class="addImg">
<div class="addImgBtn">
+
<input type="file" @change="onFileChange($event,question.question_id,p_index)">
</div>
</div>
</div>
</div>

js:

data里面需要定义imgObj: {},

onFileChange (e, id, index) {
Indicator.open()
var files = e.target.files || e.dataTransfer.files
if (!files.length) {
return
}
this.createImage(files[], id, index)
},
createImage (file, id, index) {
let orientation =
EXIF.getData(file, function () {
orientation = EXIF.getTag(file, 'Orientation')
})
var reader = new FileReader()
reader.onload = (e) => {
let result = e.target.result
this.compress(result, orientation, (data) => {
let obj = {}
obj.imgpath = data
obj.expert_consult_order_id = this.orderId
this.imgObj[index].push(data)
let imgStr = {
question_id: id,
question_value: this.imgObj[index]
}
this.submitArray[index] = imgStr
let effectimg = {question_id: id, question_value: this.imgList}
this.submitQuestion[index] = effectimg
Indicator.close()
})
}
reader.readAsDataURL(file)
},
compress (img, orientation, next) {
let image = new Image()
image.onload = function () {
let degree =
let width = image.naturalWidth
let height = image.naturalHeight
let maxSide = Math.max(width, height)
let minSide = Math.min(width, height)
if (maxSide > ) {
minSide = minSide / maxSide *
maxSide =
if (width > height) {
width = maxSide
height = minSide
} else {
width = minSide
height = maxSide
}
}
let canvas = document.createElement('canvas')
let cxt = canvas.getContext('2d')
canvas.width = width
canvas.height = height
cxt.fillstyle = '#fff'
if (orientation !== '' && orientation !== ) {
switch (orientation) {
case :
degree =
width = -width
height = -height
break
case :
canvas.width = height
canvas.height = width
degree =
height = -height
break
case :
canvas.width = height
canvas.height = width
degree =
width = -width
break
}
}
cxt.rotate(degree * Math.PI / )
cxt.drawImage(image, , , width, height)
next(canvas.toDataURL('image/jpeg', 0.8))
}
image.src = img
},
deleteImg (item, pindex) {
MessageBox.confirm('您想删除这张图片吗?').then(action => {
let index = this.imgObj[pindex].indexOf(item)
this.imgObj[pindex].splice(index, )
})
}

css:

.finnalPicture{
color: #000000;
font-size: torem(14px);
background-color: #eeeeee;
padding: torem(8px) torem(15px);
}
.editArea{
background-color: #ffffff;
padding: torem(15px);
display: flex;
flex-flow: row wrap;
.question{
box-sizing: border-box;
display: block;
width: %;
font-size: torem(14px);
line-height: torem(20px);
padding: torem(5px) torem(15px);
@include border(all);
border-radius: torem(5px);
}
.imgItem{
display: inline-block;
height: torem(60px);
width: torem(60px);
background-size: % %;
margin: torem(10px) torem(10px) ;
}
.addImg{
line-height: torem(60px);
.addImgBtn{
display: inline-block;
height: torem(60px);
width: torem(60px);
position: relative;
border: 1px dashed #dddddd;
color: #dddddd;
text-align: center;
font-size: torem(30px);
input{
position: absolute;
top: ;
left: ;
height: %;
width: %;
opacity: ;
}
}
span{
padding: torem(15px);
font-size: torem(14px);
color: #;
}
}
}

vue上传图片的更多相关文章

  1. vue 上传图片视频组件,可拍照选择照片,解决苹果手机拍照旋转问题

    1.创建组件components > uploadImg > index.vue <template> <input type="file" name ...

  2. Vue上传图片预览组件

    父组件: <template> <div> <h4>基于Vue.2X的html5上传图片组件</h4> <div style="widt ...

  3. axios上传图片(及vue上传图片到七牛))

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提 ...

  4. Vue 上传图片压缩 的问题

    前言 也是很少来写博客了,也是赖吧,哈哈 最近新的进度里有上传图片太大,需要前台进行图片压缩问题,然后查阅了相关资料 上传图片大于100* 1024 的用canvas 来压缩来解决 然后IOS拍照上传 ...

  5. vue 上传图片到阿里云(前端直传:不推荐)

    为何要这样做:减轻后端数据库压力(个人觉得于前端没啥用,谁返回来都行) 代码部分: <template> <div class="upLoad"> < ...

  6. vue上传图片 base64+canvas压缩图片

    这是先将图片 base64转码 在拿canvas压缩的

  7. vue上传图片到服务器

    https://blog.csdn.net/qq_29712995/article/details/78839093(copy) HTML代码: <input accept="imag ...

  8. vue 上传图片 input=file

    一.逻辑 点击li触发事件chooseImage 即触发input标签事件photoChange input标签事件photoChange file返回的是如下变量 模拟上传表单方法 执行上传 二.代 ...

  9. vue上传图片的3种方式

    https://blog.csdn.net/q3254421/article/details/88250968?utm_medium=distribute.pc_relevant.none-task- ...

随机推荐

  1. ​June 10. 2018, Week 24th, Sunday

    There is no friend as loyal as a book. 好书如挚友,情谊永不渝. From Ernest Miller Hemingway. Books are my frien ...

  2. Java高级教程

    目录 1.Java面向对象方法 1.1. 创建类和对象的方法 1.2. this的使用 1.3. 静态域和静态方法 1.3.1. 静态域:属于类的级别 1.3.2.静态常量 1.3.3 静态方法 1. ...

  3. Spring Web项目spring配置文件随服务器启动时自动加载

    前言:其实配置文件不随服务器启动时加载也是可以的,但是这样操作的话,每次获取相应对象,就会去读取一次配置文件,从而降低程序的效率,而Spring中已经为我们提供了监听器,可监听服务器是否启动,然后在启 ...

  4. Spring Cloud Config(配置中心)

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.简介 Spring Cloud Config为分布式系统中的外部配置提供服务器和客 ...

  5. Spring Security(十四):5.4 Authorize Requests

    Our examples have only required users to be authenticated and have done so for every URL in our appl ...

  6. Dubbo -- 系统学习 笔记 -- 示例 -- 参数验证

    示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 参数验证 参数验证功能是基于JSR303实现的,用户只需标识JSR303标准的验证Annotation,并通过声明filter来 ...

  7. 用java语言写一个简易版本的登录页面,包含用户注册、用户登录、用户注销、修改密码等功能

    package com.Summer_0421.cn; import java.util.Arrays; import java.util.Scanner; /** * @author Summer ...

  8. hdu - 2586 (LCA板子题)

    传送门 (这次的英文题面要比上一个容易看多了) (英语蒟蒻的卑微) 又是一个很裸的LCA题 (显然,这次不太容易打暴力咧) (但听说还是有大佬用dfs直接a掉了) 正好 趁这个机会复习一下LCA 这里 ...

  9. 深入理解koa中的co源码

    阅读目录 一:理解Generator 二:理解js函数柯里化 三:理解Thunk函数 四:理解CO源码 回到顶部 一:理解Generator 在看co源码之前,我们先来理解下Generator函数.G ...

  10. 一致性Hash算法的原理与实现(分布式映射算法)

    一致性Hash算法解决的问题: 解决分布式系统中的负载均衡问题 背景问题:有N台服务器提供缓存服务,需要对服务器进行负载均衡,将请求平均发到每台服务器上,每台服务器负载1/N的服务 硬Hash映射:将 ...