先看一下總體效果:

上傳文件做了大小和類型的限制，在動(dòng)圖中無法展現(xiàn)出來。

使用file類型的input實(shí)現(xiàn)選擇本地文件

但是瀏覽器原生的文件上傳按鈕的顏值不盡人意，而且按鈕上的文字是無法改變的，我需要把這個(gè)上傳文件的按鈕改造一下。

方法1：使用label元素來觸發(fā)一個(gè)隱藏的file類型的 input元素；（缺點(diǎn)：在多人開發(fā)時(shí)，可能出現(xiàn)重復(fù)的元素id，導(dǎo)致難以預(yù)料的bug）

<input type='file' id=’up_file_input’ v-show=’false’ ><label for=’up_file_input’></label> 方法2：或者在這個(gè)label元素的click事件函數(shù)中手動(dòng)觸發(fā)文件上傳按鈕的click事件。

<input type='file' v-show=’false’ ref='inputFileUp' ><label @click=’$refs.inputFileUp.click()’></label>

使用input的change事件獲取選擇的本地圖片并進(jìn)行校驗(yàn)

上傳圖片的校驗(yàn)規(guī)則及提示語(yǔ)由父組件通過 prop 傳遞給子組件，格式如下：

const img_valit = { type: /^.*.(jpg|png|jpeg)$/i, // 文件格式校驗(yàn) type_error_msg: ’上傳頭像圖片只能是 jpg 或者 png 格式!’, size: 3, // 文件大小校驗(yàn) size_error_msg: ’上傳的圖片大小不能超過3MB’}

這里需要注意: 需要在上傳文件按鈕的click事件中手動(dòng)清空這個(gè)文件類型輸入框的值，解決選擇和上次相同的文件之后無法觸發(fā) change事件的問題

function fileInputClick(event) { event.target.value = '';}function coverImgChange(event) { const file = event.target.files[0]; // 在組件的自定義屬性中定義一個(gè)變量 originalFile 來保存當(dāng)前上傳的文件 this.$options._myOpt.originalFile = file; // 獲取對(duì)文件的校驗(yàn)規(guī)則 const { type, size, type_error_msg, size_error_msg } = this.img_valit; // 校驗(yàn)文件類型和文件大小 const isJPG_PNG = type.test(file.name), isLt5M = file.size / 1024 / 1024 <= size; !isLt5M && this.$message.error(size_error_msg); !isJPG_PNG && this.$message.error(type_error_msg); // 文件通過校驗(yàn),打開裁剪彈窗 if (isJPG_PNG && isLt5M) { this.cropImgUrl = window.URL.createObjectURL(file); this.dialogVisible = true; } }

打開彈窗進(jìn)行圖片裁剪

彈窗使用的 Element-UI 中的彈窗, 圖片裁剪是第三方插件 vue-cropper。圖片裁剪插件中的一些配置可以參考插件官方文檔，下面的代碼中省略了配置部分的代碼。

<el-dialog :visible.sync='dialogVisible' width=’800px’> <div class='dialog-content'> <div class='cropper-image'> <vue-cropper ref='cropper' :img='cropImgUrl' @realTime='realTime' ></vue-cropper> </div> <!-- 圖片裁剪之后的預(yù)覽 --> <div class='preview-wrapper'> <div : > <div :style='previews.div'> <img :src='http://www.cgvv.com.cn/bcjs/previews.url' :style='[previews.img]'> </div> </div> <p class='preview-text'>裁剪結(jié)果預(yù)覽</p> </div> </div> <div slot='footer' class='dialog-footer'> <button @click='dialogEsc()'>取 消</button> <button @click='dialogSure()'>確 定</button> </div> </el-dialog>

向服務(wù)器發(fā)送請(qǐng)求上傳圖片

上傳文件接口中，向后臺(tái)發(fā)送請(qǐng)求的參數(shù)為 {image: 文件本身(File類型), filename: 文件名}

function realTime(data) { this.previews = data;}// 裁剪彈窗中確定按鈕的點(diǎn)擊事件function dialogSure() { const ajaxConfig = { headers: { 'Content-Type': 'multipart/form-data' } }; // 上傳圖片的文件名 let cropFileName = this.$options._myOpt.originalFile.name.match(/([^/]+)(?=.)/gi)[0] || Date.now().toString(); this.$refs.cropper.getCropBlob(blob => { // IE 和 Edge 不支持 File 構(gòu)造函數(shù) let cropFile = new File( [blob], cropFileName.toString() + '.' + (this.cropperConfig.outputType || 'jpg'), { type: blob.type } ); let upParams = new FormData(); upParams.append('image', cropFile); upParams.append('filename', cropFile.fileName); axios.post(this.up_action, upParams).then(({ data }) => { if (data.status === 0) { this.coverUlr = window.URL.createObjectURL(blob); this.pathToParent({ fileId: data.result.fileId, fileExt: data.result.fileExt }); } else { this.coverUlr = ''; this.pathToParent({ fileId: '', fileExt: '' }); } }); }); this.dialogVisible = false; } // 向父組件傳遞上傳文件成功之后后臺(tái)返回的數(shù)據(jù) function pathToParent(filePath) { this.$emit('getFilePath', filePath); }

以上就是vue 圖片裁剪上傳組件的實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于vue 圖片裁剪上傳組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！