vue 圖片裁剪上傳組件的實現(xiàn)

更新時間：2020年11月12日 08:59:14 作者：游樂場

這篇文章主要介紹了vue 圖片裁剪上傳組件的實現(xiàn)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

先看一下總體效果:

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

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

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

方法1：使用label元素來觸發(fā)一個隱藏的file類型的 input元素；（缺點：在多人開發(fā)時，可能出現(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：或者在這個label元素的click事件函數(shù)中手動觸發(fā)文件上傳按鈕的click事件。

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

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

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

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

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

function fileInputClick(event) {
  event.target.value = "";
}
function coverImgChange(event) {
   const file = event.target.files[0];
   // 在組件的自定義屬性中定義一個變量 originalFile 來保存當(dāng)前上傳的文件
   this.$options._myOpt.originalFile = file;
   // 獲取對文件的校驗規(guī)則
   const { type, size, type_error_msg, size_error_msg } = this.img_valit;
   // 校驗文件類型和文件大小
   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);
   // 文件通過校驗,打開裁剪彈窗
   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' title="圖片裁剪">
   <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
      class="show-preview"
      :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}"
     >
      <div :style="previews.div">
       <img :src="previews.url" class="preview_img" :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ā)送請求上傳圖片

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

function realTime(data) {
  this.previews = data;
}
// 裁剪彈窗中確定按鈕的點擊事件
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;
  }
  // 向父組件傳遞上傳文件成功之后后臺返回的數(shù)據(jù)
  function pathToParent(filePath) {
   this.$emit("getFilePath", filePath);
  }

以上就是vue 圖片裁剪上傳組件的實現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于vue 圖片裁剪上傳組件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: