這篇文章主要介紹了vue.js 實現圖片本地預覽裁剪壓縮上傳功能,程式碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
以下程式碼涉及Vue 2.0 及ES6 語法。
純javascrpit 實現，相容ie9以上瀏覽器，在本地做好檔案格式、長寬、大小的偵測，減少瀏覽器互動。
現實是殘酷的，為了相容Ie9 還是用上了 flash，第二篇來解釋解釋。
<p id="wrap">
<label>
点我上传图片
<input type='file' @change="change" ref="input">
</label>
<img :src="src" ref="img">
</p>
new Vue({
el: '#wrap',
data: {
// 一张透明的图片
src:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
elInput: null
},
methods: {
change(e){
// ...
}
}
})現代瀏覽器中十分簡單
function getSize(e){
return e.target.files[0].size;
}但ie9 下暫時沒有找到純JS 的方案。
因此，在需要判斷大小時，遇到ie9 直接繞過不去判斷
const refs = this.$refs const elInput = refs.input const elImg = refs.img
現代瀏覽器中，透過呼叫FileReader 讀取本機圖片，將圖片位址轉換為Base64 格式實現預覽。
function getSrc(){
const reader = new FileReader();
reader.onload = (e) => {
const src = e.target.result;
elImg.src = src;
};
if (elInput.files && elInput.files[0]) {
reader.readAsDataURL(elInput.files[0]);
}
}但問題又來了，ie9 不支援 FileReader，但可以透過 ie 濾鏡顯示。
function getSrc(){
elInput.select();
elInput.blur();
const src = document.selection.createRange().text;
document.selection.empty();
elImg.style.filter = `progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='${src}')`;
}濾鏡中 sizingMethod='scale' 的寫法是為了圖片能適應內容縮放。
由於IE9 對安全限制有所增強，實務上會遇到以下兩個問題：
如果file 控制項獲得焦點，則document.selection.createRange() 拒絕訪問，因此需要在elInput.select() 後面加一句elInput.blur() 即可。
為了讓上傳按鈕更美觀，預設給 input[type=file] 的設定了樣式 visible:hidden ，這樣會導致 ie9 下報錯誤。應該會被瀏覽器認為欺騙用戶點擊，只好曲線救國。
label{
overflow:hidden;
}
label input[type='file']{
position:absolute;
top:9999px;
left:9999px;
}同理，利用ie 濾鏡和FileReader 的方案分別對ie9 和非ie9 實作。
ie9 的方案
參數src 接受的是本機圖片路徑
let tempEl;
const getSizeIncompatible = (src, callback) => {
if (!tempEl) {
tempEl = document.createElement('p');
tempEl.style.position = 'absolute';
tempEl.style.width = '1px';
tempEl.style.height = '1px';
tempEl.style.left = '-9999px';
tempEl.style.top = '-9999px';
tempEl.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)';
document.body.insertBefore(tempEl, document.body.firstChild);
}
tempEl.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
callback(tempEl.offsetWidth, tempEl.offsetHeight);
};其中sizingMethod='image' 是為了圖片顯示原始大小。
非ie9 方案
參數src 接受的是base64 編碼後的圖片路徑
##
const getSize = (src, callback) => {
const image = new Image();
image.onload = () => {
callback(image.width, image.height);
};
image.src = src;
};##
以上是在vue.js中實作圖片本地預覽 裁剪 壓縮 上傳等一系列功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
