element-ui 圖片壓縮上傳功能實(shí)現(xiàn)
element-ui 圖片壓縮上傳
export const compressImgNew = (file) => {
return new Promise(resolve => {
const reader = new FileReader()
const image = new Image()
image.onload = (imageEvent) => {
const canvas = document.createElement('canvas') // 創(chuàng)建畫布
const context = canvas.getContext('2d') // 畫布為2d
// const width = image.width / 1.05 // 圖片寬度 / 壓縮比例
// const height = image.height / 1.05 // 圖片高度 / 壓縮比例
const width = image.width / 3 // 圖片寬度 / 壓縮比例
const height = image.height / 3 // 圖片高度 / 壓縮比例
canvas.width = width // 畫布寬度
canvas.height = height // 畫布寬度
context.clearRect(0, 0, width, height)
context.drawImage(image, 0, 0, width, height)
const dataUrl = canvas.toDataURL(file.type) //圖片轉(zhuǎn)路徑
const blobData = dataURLtoBlob(dataUrl, file.type) //圖片轉(zhuǎn)二進(jìn)制
resolve(blobData)
}
reader.onload = e => { image.src = e.target.result }
reader.readAsDataURL(file)
})
};
//圖片轉(zhuǎn)二進(jìn)制
function dataURLtoBlob(dataURL, type) {
var binary = atob(dataURL.split(',')[1])
var array = []
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i))
}
return new Blob([new Uint8Array(array)], { type: type })
}
使用

import { compressImgNew } from “@/assets/js/picture.js”;
beforeAvatarUpload(file) {
let types = [
"image/jpeg",
"image/jpg",
"image/png"
];
const isImage = types.includes(file.type);
const isLtSize = file.size / 1024 / 1024 < 5;
if (!isImage) {
this.$message.warning("上傳圖片只能是 JPG、JPEG、PNG 格式!");
return false;
}
if (!isLtSize) {
this.$message.warning("上傳圖片大小不能超過 5MB!");
return false;
}
return compressImgNew(file);
},到此這篇關(guān)于element-ui 圖片壓縮上傳的文章就介紹到這了,更多相關(guān)element-ui 圖片上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及折疊和展開效果【推薦】
本文主要介紹了js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及文字折疊和展開效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01
Ionic2系列之使用DeepLinker實(shí)現(xiàn)指定頁(yè)面URL
這篇文章主要介紹了Ionic2系列之使用DeepLinker實(shí)現(xiàn)指定頁(yè)面URL的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11
如何用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框
本文介紹了如何用uni-app實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕和搜索框,感興趣的同學(xué),可以參考下,并且試驗(yàn)一下。2021-06-06
js表單提交和submit提交的區(qū)別實(shí)例分析
這篇文章主要介紹了js表單提交和submit提交的區(qū)別,結(jié)合實(shí)例形式較為詳細(xì)的分析了js表單提交和submit提交具體實(shí)現(xiàn)方法與使用技巧,需要的朋友可以參考下2015-12-12
javascript 系統(tǒng)文件夾文件操作及參數(shù)介紹
javascript文件操作包括寫入文件、當(dāng)前目錄文件、讀文件、刪除文件、批量刪除,未刪除文件夾,刪除不了當(dāng)前目錄文件等等,感興趣的朋友可以參考下2013-01-01
用javascript getComputedStyle獲取和設(shè)置style的原理
這兩天用了baidu 百度空間中的彈出窗口js,感覺不錯(cuò),很強(qiáng)大,很好很簡(jiǎn)單的解決了好幾個(gè)問題,界面友好度以及美化也好多了,以前都是硬邦邦window.open();2008-10-10
JavaScript及jquey實(shí)現(xiàn)多個(gè)數(shù)組的合并操作
這篇文章主要介紹了JavaScript及jquey實(shí)現(xiàn)多個(gè)數(shù)組的合并操作,在某些情況下還是比較實(shí)用的,需要的朋友可以參考下2014-09-09

