vue上传图片
在用这块代码前需要在主页面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+1}}.{{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[0], id, index) }, createImage (file, id, index) { let orientation = 1 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 = 0 let width = image.naturalWidth let height = image.naturalHeight let maxSide = Math.max(width, height) let minSide = Math.min(width, height) if (maxSide > 1024) { minSide = minSide / maxSide * 1024 maxSide = 1024 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 !== 1) { switch (orientation) { case 3 : degree = 180 width = -width height = -height break case 6 : canvas.width = height canvas.height = width degree = 90 height = -height break case 8 : canvas.width = height canvas.height = width degree = 270 width = -width break } } cxt.rotate(degree * Math.PI / 180) cxt.drawImage(image, 0, 0, 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, 1) }) }
css:
.finnalPicture{
color: #000000;
font-size: torem(14px);
}
.editArea{ background-color: #ffffff; padding: torem(15px); display: flex; flex-flow: row wrap; .question{ box-sizing: border-box; display: block; 100%; 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); torem(60px); background-size: 100% 100%; margin: 0 torem(10px) torem(10px) 0; } .addImg{ line-height: torem(60px); .addImgBtn{ display: inline-block; height: torem(60px); torem(60px); position: relative; border: 1px dashed #dddddd; color: #dddddd; text-align: center; font-size: torem(30px); input{ position: absolute; top: 0; left: 0; height: 100%; 100%; opacity: 0; } } span{ padding: 0 torem(15px); font-size: torem(14px); color: #999; } } }