效果图
主要通过picCompress .js这个文件进行压缩转base64
html
<el-upload
class="upload-demo"
drag
:headers="headers"
action="#"
multiple
:show-file-list="false"
:before-upload="beforeUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">上传附件 支持文件拖拽到此处上传</div>
</el-upload>
js
记得先引入这个文件,主要通过这个文件进行压缩转base64
import { picCompress } from "../../../utils/picCompress .js";
// 图片上传压缩
async beforeUpload(file) {
const type = file.type;
const isIMG =
type === "image/jpg" ||
type === "image/jpeg" ||
type === "image/png" ||
type === "image/svg" ||
type === "image/bmp" ||
type === "image/gif" ||
type === "image/tiff";
if (isIMG) {
// 把上传的文件压缩成base64编码格式
picCompress.methods.compressImg(file).then((res) => {
//res就是压缩后转成base64后的数据
// 由字节转换为 KB
let fileLength = parseInt(res.length - (res.length / 8) * 2);
let size = "";
size = parseInt((fileLength / 1024).toFixed(2));
console.log("压缩后:" + size + "KB");
if (size > 5120) {
this.$message.info("上传图纸压缩后大小不得大于5MB!");
return false;
} else {
console.log(file);
let files = {};
files.name = file.name;
files.path = res;
files.size = file.size;
files.suffix = file.type.substring(file.type.lastIndexOf("/") + 1);
files.type = this.fileInfo.fileType;
this.$emit("fileData", files);
}
});
} else {
// 其他文件正常上传
let formData = new FormData();
formData.append("file", file);
formData.append("type", this.fileInfo.fileType);
let api = this.service;
api.defaults.headers.common["Content-Type"] = "multipart/form-data";
let res = await api.post("/file/upload/multipart", formData);
if (res.status == 0) {
let files = {};
files.name = res.data.name;
files.path = res.data.path;
files.size = res.data.size;
files.suffix = res.data.suffix;
files.type = this.fileInfo.fileType;
this.$emit("fileData", files);
}
}
},
通过picCompress .js这个文件进行压缩转base64 用的是canvas压缩后再转base64
export const picCompress = {
methods: {
// 压缩图片
compressImg(file) {
var src;
var files;
var fileSize = parseFloat(parseInt(file['size']) / 1024);
console.log('压缩前KB :' + fileSize)
var read = new FileReader();
read.readAsDataURL(file);
return new Promise(function(resolve, reject) {
read.onload = function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = function() {
//默认按比例压缩
var w = this.width,
h = this.height;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var base64;
// 创建属性节点
canvas.setAttribute("width", w);
canvas.setAttribute("height", h);
ctx.drawImage(this, 0, 0, w, h);
if (fileSize < 1) {
//如果图片小于一兆 那么不执行压缩操作
base64 = canvas.toDataURL(file['type'], 1);
} else if (fileSize > 1 && fileSize < 2) {
//如果图片大于1M并且小于2M 那么压缩0.5
base64 = canvas.toDataURL(file['type'], 0.5);
} else {
//如果图片超过2m 那么压缩0.2
base64 = canvas.toDataURL(file['type'], 0.2);
}
// 回调函数返回file的值(将base64编码转成file)如果后台接收类型为base64的话这一步可以省略
resolve(base64)
};
};
})
},
//base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件)
dataURLtoFile(dataurl) {
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], {
type: mime
});
}
}
};