圖片上傳前預覽、壓縮、轉blob、轉formData等操做

　　直接上代碼吧：

<template>
<div>
    <div class="header">添加淘寶買號</div>
    <div class="tips">
        <p class="font16">注意事項</p>
        <p class="font14">買號採用人工審覈，提交後0.5個工做日內完成審覈，請耐心等待，新手務必認真準確填寫。</p>
    </div>
    <el-form ref="taobao" :model="taobaoInfo" label-width="100px" class="miForm">
        <el-form-item label="淘寶買號">
            <el-input v-model="taobaoInfo.name" placeholder="請輸入淘寶的會員名"></el-input>
        </el-form-item>
        <el-form-item label="買號等級">
            <el-select v-model="taobaoInfo.level" placeholder="請選擇買號星級">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <div class="upload">
        <img v-if="src" :src="src" alt="user image" height="100%" width="100%">
        <input type="file" @change="uploadIMG" ref="file" id="file">
        <label for="file"><i class="el-icon-plus"></i></label>
        <div class="del"><i class="el-icon-error" @click="delImg"></i></div>
    </div>
</div>
</template>
<script type="ecmascript-6"> export default { name:'taobao', data(){ return { taobaoInfo:{}, options:[ {label:'一心',value:1}, {label:'二心',value:2}, {label:'三心',value:3}, {label:'四心',value:4}, {label:'五心',value:5}, {label:'一鑽',value:6}, {label:'二鑽',value:7}, {label:'三鑽',value:8}, {label:'四鑽',value:9}, {label:'五鑽',value:10} ], src: ''// 轉base64碼後的data字段
 } }, methods:{ getFile (file) { let _this = this
            if (!file || !window.FileReader) return // 看支持不支持FileReader 
            if (/^image/.test(file.type)) { //建立一個reader 
                let reader = new FileReader() reader.readAsDataURL(file) // 這裏是最關鍵的一步，轉換就在這裏 
                reader.onloadend = function () { _this.src = this.result let result = this.result; let img = new Image(); img.src = result; console.log("未壓縮前的圖片大小：" + result.length); img.onload = function() { let data = _this.compress(img); let blob = _this.dataURItoBlob(data); console.log("base64轉blob對象：" + blob); var formData = new FormData(); formData.append("file", blob); console.log("將blob對象轉成formData對象：" + formData.get("file")); let config = { headers: { "Content-Type": "multipart/form-data" } }; // 發送請求; 
                        _this.axios.post(_this.uploadUrl.url, formData, config).then(res => { if (res.data.code == 200) { _this.$emit( "getImgsrc", res.data.data.resultftphost, res.data.data.resulturl ); } else { _this.$message({ message: "圖片上傳失敗，請重試", type: "warning" }); } }); } } } }, uploadIMG(e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.picavalue = files[0]; console.log("圖片大小：" + this.picavalue.size / 1024 + "kb"); if (this.picavalue.size / 1024 > 5000) { this.$message({ message: "圖片過大不支持上傳", type: "warning" }); } else { this.getFile(this.picavalue); } }, // 壓縮圖片 
 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); //進行最小壓縮 
            let ndata = canvas.toDataURL("image/jpeg", 0.1); console.log("壓縮後的圖片大小：" + ndata.length); console.log("壓縮後的圖片內容：" + ndata) return ndata; }, // base64轉成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.src = null; } } } </script>
<style scoped lang="stylus" rel="stylesheet"> @import '../../assets/stylus/index.styl' .tips{ padding 10px line-height 1.5em } .el-form-item{ margin-bottom 18px background-color #fff } .miForm /deep/ input{ border none } .upload { margin-left 20px width 150px height 150px border:2px solid #ddd; border-radius: 2px; text-align: center; overflow:hidden position:relative; label{ line-height 150px font-size: 30px; } .del{ position:absolute; right:0; top:0; color:red; } } input[type='file'] { display: none; } </style>