首先package.json引入vue-cropper

npm i vue-cropper -D

template組件中加入上傳表單，隱藏input表單，點擊圖片打開資源文件夾

<

然后繼續在template組件中加入vue-cropper模塊，vue-cropper包在彈窗中顯示

<!-- 圖片剪切彈窗 --><van-dialogv-model="showCropperDialog":show-confirm-button="false":close-on-click-overlay="true"><vueCropperref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixedBox="option.fixedBox"></vueCropper><div class="upload-btn"><van-button type="primary" @click="uploadCropImg">確認上傳</van-button></div></van-dialog>

接下來在script中引入模塊依賴

import Vue from 'vue' import { Dialog, Button } from 'vant' import VueCropper from 'vue-cropper' Vue.use(Dialog) Vue.use(Button) Vue.use(VueCropper)

然后在methods添加相應方法

// 上傳剪切后用戶的頭像圖片uploadCropImg () {if(this.upload_type === 'user_picture') {// 隱藏裁剪圖片彈窗this.showCropperDialog = falsethis.$refs.cropper.getCropData((data) => { var parames = new URLSearchParams()parames.append('file[content]', data)this.$post('//api/uploads/image',parames).then((response) => {if (response.status == 'success') {// ...} else {// ...}})})}},// 打開文件夾選擇上傳圖片 uploadImg(e, num, type = 'user_picture') { var _this = this;//上傳圖片 var file = e.target.files[0] _this.fileName = file.name;if (!/.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) { return false } var reader = new FileReader(); reader.onload =(e) => { let data; if (typeof e.target.result === 'object') { // 把Array Buffer轉化為blob 如果是base64不需要 data = window.URL.createObjectURL(new Blob([e.target.result])) } else { data = e.target.result }if (num === 1) { _this.option.img = data } else if (num === 2) { _this.example2.img = data } } // 轉化為base64 // reader.readAsDataURL(file) // 轉化為blob reader.readAsArrayBuffer(file)this.upload_type = typethis.showCropperDialog = true },

最后附上效果圖：

End~~~~~~~~~~~快夸咱小仙女

總結

以上是生活随笔為你收集整理的button url图片显示不出来_哼！Vue如何在图片上传前使用vue-cropper进行剪切的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。