代碼還在優(yōu)化，后續(xù)會進(jìn)行更新姆打，該組件引用了element-ui的彈出框樣式良姆，使用axios庫進(jìn)行ajax請求，向后臺發(fā)送的參數(shù)是formData對象幔戏，如果需要的base64可不轉(zhuǎn)formData對象玛追，直接將壓縮過后的base64發(fā)給后臺
該組件上傳圖片的大致思路：
- 利用H5的FileReader對象將上傳的圖片轉(zhuǎn)成base64格式
- 利用canvas的drawImage方法重繪上傳的圖片（注：drawimage是一個異步方法，需要在圖片讀取成功后在進(jìn)行重繪闲延，否則可能會壓縮不成功）
- 在利用canvas的toDataURL方法將圖片壓縮
- 在將壓縮后的base64編碼圖片轉(zhuǎn)成blob對象
- 創(chuàng)建一個formData對象痊剖，將blob對象append進(jìn)去
- 圖片上傳時需設(shè)置請求為
{ "Content-Type": "multipart/form-data" } - 將formData對象上傳到后臺
html部分
<div class="upload">
<!-- 圖片展示 -->
<div class="cha" v-show="(imgUrl)">
<!-- 刪除icon -->
<div class="del"><i class="el-icon-delete" @click="delImg"></i></div>
<img :src="imgUrl">
<!-- 放大icon -->
<div class="layer"><i @click="isEnlargeImage = true" class="el-icon-view"></i></div>
</div>
<!-- 圖片上傳控件 -->
<div class="load" v-show="(!imgUrl)">
<input type="file" name="" id="form" @change="uploadIMG">
</div>
<!-- 圖片預(yù)覽彈框 -->
<el-dialog :visible.sync="isEnlargeImage" size="large" :append-to-body="true" top="8%" width="60%">
<img @click="isEnlargeImage = false" style="width:100%;" :src="imgUrl">
</el-dialog>
</div>
JS代碼
<script>
export default {
props: ["uploadUrl"],
data() {
return {
picavalue: "",
imgUrl: null,
isEnlargeImage: false
};
},
methods: {
uploadIMG(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.picavalue = files[0];
console.log(this.picavalue.size / 1024);
if (this.picavalue.size / 1024 > 5000) {
this.$message({
message: "圖片過大不支持上傳",
type: "warning"
});
} else {
this.imgPreview(this.picavalue);
}
},
//獲取圖片
imgPreview(file, callback) {
let self = this;
//判斷支不支持FileReader
if (!file || !window.FileReader) return;
if (/^image/.test(file.type)) {
//創(chuàng)建一個reader
let reader = new FileReader();
//將圖片轉(zhuǎn)成base64格式
reader.readAsDataURL(file);
//讀取成功后的回調(diào)
reader.onloadend = function() {
let result = this.result;
let img = new Image();
img.src = result;
console.log("********未壓縮前的圖片大小********");
console.log(result.length);
img.onload = function() {
let data = self.compress(img);
self.imgUrl = result;
let blob = self.dataURItoBlob(data);
console.log("*******base64轉(zhuǎn)blob對象******");
console.log(blob);
var formData = new FormData();
formData.append("file", blob);
console.log("********將blob對象轉(zhuǎn)成formData對象********");
console.log(formData.get("file"));
let config = {
headers: { "Content-Type": "multipart/form-data" }
};
// 發(fā)送請求;
self.axios.post(self.uploadUrl.url, formData, config).then(res => {
// console.log(res);
// console.log(res.data.data.resultftphost)
// console.log(res.data.data.resulturl)
// this.$emit('')
if (res.data.code == 200) {
self.$emit(
"getImgsrc",
res.data.data.resultftphost,
res.data.data.resulturl
);
} else {
self.$message({
message: "圖片上傳失敗，請重試",
type: "warning"
});
}
});
};
};
}
},
// 壓縮圖片
compress(img) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let initSize = img.src.length;
let width = img.width;
let height = img.height;
canvas.width = width;
canvas.height = height;
// 鋪底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, width, height);
//進(jìn)行最小壓縮
let ndata = canvas.toDataURL("image/jpeg", 0.1);
// console.log("*******壓縮后的圖片大小*******");
// console.log(ndata)
// console.log(ndata.length);
return ndata;
},
// base64轉(zhuǎn)成bolb對象
dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(",")[0].indexOf("base64") >= 0)
byteString = atob(base64Data.split(",")[1]);
else byteString = unescape(base64Data.split(",")[1]);
var mimeString = base64Data
.split(",")[0]
.split(":")[1]
.split(";")[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
},
//刪除事件
delImg() {
this.imgUrl = null;
}
}
};
style 部分
.upload {
position: relative;
width: 200px;
height: 220px;
// 圖片展示
.cha {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 6px;
border: 1px dashed #cccccc;
overflow: hidden;
box-sizing: border-box;
.layer {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 200px;
background-color: rgba(0, 0, 0, 0.3);
text-align: center;
line-height: 200px;
opacity: 0;
color: #ffffff;
border: none;
}
.del {
position: absolute;
bottom: 0;
right: 0;
opacity: 0;
z-index: 2;
border: none;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
border: none;
}
}
//鼠標(biāo)放上時顯示刪除和放大
.cha:hover .layer,
.cha:hover .del {
opacity: 1;
}
//點(diǎn)擊上傳
.load {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border: 1px dashed #cccccc;
input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
.load::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
width: 1px;
height: 80%;
border-right: 1px solid #cccccc;
}
.load:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 1px;
border-top: 1px solid #cccccc;
}
}
