|
|
@@ -0,0 +1,157 @@
|
|
|
+<template>
|
|
|
+ <div class="img-wrap">
|
|
|
+ <p class="name">{{item.name|| msg}}</p>
|
|
|
+ <div class="box">
|
|
|
+ <ul class="upload-imgs">
|
|
|
+ <li v-if="imgLen>=6 ? false : true">
|
|
|
+ <input type="file" class="upload" @change="addImg" accept="image/*" ref="inp" style="display:none"/>
|
|
|
+ <p @click="handleUpload">点击上传</p>
|
|
|
+ </li>
|
|
|
+ <li v-for='(value, key) in imgs'>
|
|
|
+ <!-- <p class="img"><img :src="getObjectURL(value)"><a class="close" @click="delImg(key)">×</a></p> -->
|
|
|
+ <p class="img"><img :src="value"><a class="close" @click="delImg(key)">×</a></p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script type="text/javascript">
|
|
|
+ export default{
|
|
|
+ name:'UploadImg',
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ mag:"上传图片",
|
|
|
+ imgs:{},
|
|
|
+ imgLen:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props:['item'],
|
|
|
+ methods:{
|
|
|
+ handleUpload(){
|
|
|
+ const inp = this.$refs.inp;
|
|
|
+ inp.click();
|
|
|
+ },
|
|
|
+ delImg(key){
|
|
|
+ console.log(2222,key)
|
|
|
+ },
|
|
|
+ addImg(){
|
|
|
+ // 上传图片进行压缩，压缩后超过4M则不允许上传
|
|
|
+ let fileTag = this.$refs.inp;
|
|
|
+ let img = this.$refs.img;
|
|
|
+ let file = fileTag.files[0];console.log("文件信息：",file)
|
|
|
+ const that = this;
|
|
|
+ this.imgBase64(file, function (image, canvas) {
|
|
|
+ var maxSize = 4*1024; // 4M
|
|
|
+ var fileSize = file.size/1024; //kb 图片大小
|
|
|
+ var uploadSrc;
|
|
|
+ var uploadFile;
|
|
|
+ if(fileSize > maxSize) { // 如果图片大小大于4m，进行压缩
|
|
|
+ console.log(maxSize,fileSize, maxSize/fileSize );
|
|
|
+ uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);
|
|
|
+ uploadFile = that.dataURLtoFile(uploadSrc, file.name.split('.')[0]); // 转成file文件
|
|
|
+ // uploadFile = that.convertBase64UrlToBlob(uploadSrc); // 转成blob
|
|
|
+ //console.log("大于：",uploadFile)
|
|
|
+ } else {
|
|
|
+ uploadSrc = image.src; //canvas.toDataURL(file.type,0.5);
|
|
|
+ uploadFile = file;
|
|
|
+ }
|
|
|
+
|
|
|
+ var compressedSize = uploadFile.size / 1024 / 1024;
|
|
|
+ //console.log("压缩后大小：",compressedSize)
|
|
|
+ if(compressedSize.toFixed(2) > 4.00) {
|
|
|
+ alert('上传图片不可超过4M');
|
|
|
+ } else {
|
|
|
+ // img.setAttribute('src',uploadSrc);
|
|
|
+ // img.className = 'img';
|
|
|
+ let key = file.name + new Date().getTime();
|
|
|
+ this.$set(this.imgs,key,uploadSrc);
|
|
|
+ this.imgLen++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ imgBase64(file, callback) {
|
|
|
+ var self = this;
|
|
|
+ // 看支持不支持FileReader
|
|
|
+ if (!file || !window.FileReader) return;
|
|
|
+ // 创建一个 Image 对象
|
|
|
+ var image = new Image();
|
|
|
+ // 绑定 load 事件处理器，加载完成后执行
|
|
|
+ image.onload = function(){
|
|
|
+ // 获取 canvas DOM 对象
|
|
|
+ var canvas = document.createElement('canvas')
|
|
|
+ // 返回一个用于在画布上绘图的环境, '2d' 指定了您想要在画布上绘制的类型
|
|
|
+ var ctx = canvas.getContext('2d')
|
|
|
+ // 如果高度超标 // 参数，最大高度
|
|
|
+ var MAX_HEIGHT = 3000;
|
|
|
+ if(image.height > MAX_HEIGHT) {
|
|
|
+ // 宽度等比例缩放 *=
|
|
|
+ image.width *= MAX_HEIGHT / image.height;
|
|
|
+ image.height = MAX_HEIGHT;
|
|
|
+ }
|
|
|
+ // 获取 canvas的 2d 环境对象,
|
|
|
+ // canvas清屏
|
|
|
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
+ // 重置canvas宽高
|
|
|
+ canvas.width = image.width;
|
|
|
+ canvas.height = image.height;
|
|
|
+ // 将图像绘制到canvas上
|
|
|
+ ctx.drawImage(image, 0, 0, image.width, image.height);
|
|
|
+ callback(image, canvas);
|
|
|
+ };
|
|
|
+ if (/^image/.test(file.type)) {
|
|
|
+ // 创建一个reader
|
|
|
+ var reader = new FileReader();
|
|
|
+ // 将图片将转成 base64 格式
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ // 读取成功后的回调
|
|
|
+ reader.onload = function () {
|
|
|
+ // self.imgUrls.push(this.result);
|
|
|
+ // 设置src属性，浏览器会自动加载。
|
|
|
+ // 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
|
|
|
+ image.src = this.result;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 将以base64的图片url数据转换为Blob
|
|
|
+ convertBase64UrlToBlob(urlData) {
|
|
|
+ var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
|
|
|
+ //处理异常,将ascii码小于0的转换为大于0
|
|
|
+ var ab = new ArrayBuffer(bytes.length);
|
|
|
+ var ia = new Uint8Array(ab);
|
|
|
+ for (var i = 0; i < bytes.length; i++) {
|
|
|
+ ia[i] = bytes.charCodeAt(i);
|
|
|
+ }
|
|
|
+ return new Blob([ab], {type: 'image/jpg'});
|
|
|
+ },
|
|
|
+ // 将以base64的图片url数据转换为file
|
|
|
+ dataURLtoFile(dataurl, filename) { //将base64转换为文件
|
|
|
+ var arr = dataurl.split(','),
|
|
|
+ mime = arr[0].match(/:(.*?);/)[1],
|
|
|
+ bstr = atob(arr[1]),
|
|
|
+ n = bstr.length,
|
|
|
+ u8arr = new Uint8Array(n);
|
|
|
+ while (n--) {
|
|
|
+ u8arr[n] = bstr.charCodeAt(n);
|
|
|
+ }
|
|
|
+ return new File([u8arr], filename, {type: mime});
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ .img-wrap{
|
|
|
+ font-size: .3rem;
|
|
|
+ .name{
|
|
|
+ color: #000;
|
|
|
+ margin-bottom: .36rem;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .upload-imgs{
|
|
|
+ margin-bottom: .2rem;
|
|
|
+ li{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
liucf
