<div class="uplod-send-btn">
? ? ? ? ? <label for="uploads"><i class="fa fa-cloud-upload icons"> 圖片裁切</i></label>
? ? ? ? ? <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)" >
? ? ? ? </div>
<!-- 圖片裁剪彈框 -->
? ? ? <div class="cropper-layer" v-if="dialogVisible">
? ? ? ? <div class="cropper-title">
? ? ? ? ? <h2 class="tit">圖片裁剪</h2>
? ? ? ? ? <i class="fa fa-times icon" @click="isShowDialog "></i>
? ? ? ? </div>
? ? ? ? <div class="cropper">
? ? ? ? ? <div class="cropper-header">
? ? ? ? ? ? <span class="cropper-sp">旋轉(zhuǎn):</span>
? ? ? ? ? ? <button class="cropper-btn" @click="rotateLeft"><i class="fa fa-undo"></i></button>
? ? ? ? ? ? <button class="cropper-btn" @click="rotateRight"><i class="fa fa-repeat"></i></button>
? ? ? ? ? ? <span class="cropper-sp">重新裁切:</span>
? ? ? ? ? ? <button class="cropper-btn" @click="refreshCrop"><i class="fa fa-undo"></i></button>
? ? ? ? ? ? <span class="cropper-sp">裁切后寬/高:</span>
? ? ? ? ? ? <button class="cropper-btn" >{{previews.width}}/{{previews.height}}</button>
? ? ? ? ? </div>
? ? ? ? ? <div class="cropper-center">
? ? ? ? ? ? <vueCropper
? ? ? ? ? ? ? ref="cropper"
? ? ? ? ? ? ? :img="option.img"
? ? ? ? ? ? ? :outputSize="option.outputSize"
? ? ? ? ? ? ? :outputType="option.outputType"
? ? ? ? ? ? ? :info="true" :full="option.full"
? ? ? ? ? ? ? :canMove="option.canMove"
? ? ? ? ? ? ? :canMoveBox="option.canMoveBox"
? ? ? ? ? ? ? :fixedBox="option.fixedBox"
? ? ? ? ? ? ? :original="option.original"
? ? ? ? ? ? ? :autoCrop="option.autoCrop"
? ? ? ? ? ? ? :autoCropWidth="option.autoCropWidth"
? ? ? ? ? ? ? :autoCropHeight="option.autoCropHeight"
? ? ? ? ? ? ? :centerBox="option.centerBox"
? ? ? ? ? ? ? :high="option.high"
? ? ? ? ? ? ? :infoTrue="option.infoTrue"
? ? ? ? ? ? ? :enlarge="option.enlarge"
? ? ? ? ? ? ? :maxImgSize="option.maxImgSize"
? ? ? ? ? ? ? @realTime="realTime"
? ? ? ? ? ? ? :canScale="option.canScale">
? ? ? ? ? ? </vueCropper>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="cropper-footer">
? ? ? ? ? <button class="btn-l" @click="isShowDialog">取 消</button>
? ? ? ? ? <button class="btn-r" @click="finish('blob')">裁切并上傳</button>
? ? ? ? </div>
? ? ? </div>
<javascript>
import { VueCropper } from 'vue-cropper'
export default {
components: { VueCropper },
data(){
return{
option: {
? ? ? ? img: '',
? ? ? ? outputSize: 1,
? ? ? ? outputType: 'png', // 輸出圖片格式
? ? ? ? full: true, // 是否輸出原圖比例的截圖
? ? ? ? canMove: true, // 能否拖動(dòng)圖片
? ? ? ? canMoveBox: true, // 能否拖動(dòng)截圖框
? ? ? ? fixedBox: false, // 截圖框固定大小
? ? ? ? original: true, // 上傳圖片是否顯示原始寬高
? ? ? ? autoCrop: true, // 是否自動(dòng)生成截圖框
? ? ? ? autoCropWidth: 400, // 自動(dòng)生成截圖框?qū)挾?/p>
? ? ? ? autoCropHeight: 250, // 自動(dòng)生成截圖框高度
? ? ? ? centerBox: false, // 截圖框是否限制在圖片里(只有在自動(dòng)生成截圖框時(shí)才能生效)
? ? ? ? high: true, // 是否根據(jù)dpr生成適合屏幕的高清圖片
? ? ? ? infoTrue: true, // 截圖信息展示是否是真實(shí)的輸出寬高
? ? ? ? cropData: {},
? ? ? ? enlarge: 1, // 是否按照截圖框比例輸出
? ? ? ? mode: 'cover', // 圖片默認(rèn)渲染方式
? ? ? ? canScale: true, // 是否允許滾輪圖片縮放
? ? ? ? maxImgSize: 40000 // 最大上傳圖片尺寸
? ? ? },
}
}
refreshCrop () {
? ? ? // clear
? ? ? this.$refs.cropper.refresh()
? ? },
? ? clearCrop () {
? ? ? // clear
? ? ? this.$refs.cropper.clearCrop()
? ? },
? ? changeScale (num) {
? ? ? num = num || 1
? ? ? this.$refs.cropper.changeScale(num)
? ? },
? ? rotateLeft () {
? ? ? this.$refs.cropper.rotateLeft()
? ? },
? ? rotateRight () {
? ? ? this.$refs.cropper.rotateRight()
? ? },
? ? finish (type) {
? ? ? // 輸出并上傳服務(wù)器
? ? ? var that = this
? ? ? that.dialogVisible = !that.dialogVisible
? ? ? if (type === 'blob') {
? ? ? ? this.$refs.cropper.getCropBlob(data => {
? ? ? ? ? var formData = new FormData()
? ? ? ? ? var img = window.URL.createObjectURL(data)
? ? ? ? ? this.model = true
? ? ? ? ? this.modelSrc = img
? ? ? ? ? var file = new File([data], 'img.png', { type: 'image/png' })
? ? ? ? ? formData.append('img', file)
? ? ? ? ? var axiosInstance = axios.create()
? ? ? ? ? axiosInstance.post('/M/File/PostUploadFile', formData).then((res) => {
? ? ? ? ? ? var param = {
? ? ? ? ? ? ? 'fileName': res.data.other.imgName,
? ? ? ? ? ? ? 'groupId': that.selectGroup, // 圖片分組
? ? ? ? ? ? ? 'filePath': res.data.other.imgUrl,
? ? ? ? ? ? ? 'fileSpec': res.data.other.imgWidth + 'x' + res.data.other.imgHeight,
? ? ? ? ? ? ? 'fileSize': res.data.other.imgLength,
? ? ? ? ? ? ? 'fileType': res.data.other.imgType
? ? ? ? ? ? }
? ? ? ? ? ? that.$http.post('/api/BS_FileSourceMaterial/Create', param).then(function (res) {
? ? ? ? ? ? ? that.getDataList()
? ? ? ? ? ? })
? ? ? ? ? })
? ? ? ? })
? ? ? } else {
? ? ? ? this.$refs.cropper.getCropData((data) => {
? ? ? ? ? this.model = true
? ? ? ? ? this.modelSrc = data
? ? ? ? })
? ? ? }
? ? },
? ? // 實(shí)時(shí)尺寸
? ? realTime () {
? ? ? var previews = this.$refs.cropper.cropInfo
? ? ? this.previews = {
? ? ? ? width: previews.width,
? ? ? ? height: previews.height
? ? ? }
? ? },
? ? uploadImg (e, num) {
? ? ? // 上傳圖片
? ? ? var that = this
? ? ? var file = e.target.files[0]
? ? ? if (!/\.(jpg|jpeg|png|bmp|JPG|PNG)$/.test(e.target.value)) {
? ? ? ? that.$message.error('親,上傳圖片不能為空,并且裁切只支持jpeg,jpg,png,bmp格式哦!')
? ? ? ? document.getElementById('uploads').value = null
? ? ? ? return false
? ? ? } else if (file.size / 1024 / 1024 > 1) {
? ? ? ? that.$message.error('上傳的圖片大小不能超過 1MB,請使用批量上傳!')
? ? ? ? document.getElementById('uploads').value = null
? ? ? } else {
? ? ? ? that.isShowDialog()
? ? ? ? var reader = new FileReader()
? ? ? ? reader.onload = e => {
? ? ? ? ? var data
? ? ? ? ? if (typeof e.target.result === 'object') {
? ? ? ? ? // 把Array Buffer轉(zhuǎn)化為blob 如果是base64不需要
? ? ? ? ? ? data = window.URL.createObjectURL(new Blob([e.target.result]))
? ? ? ? ? } else {
? ? ? ? ? ? data = e.target.result
? ? ? ? ? }
? ? ? ? ? this.option.img = data
? ? ? ? }
? ? ? ? reader.readAsArrayBuffer(file)
? ? ? ? document.getElementById('uploads').value = null
? ? ? }
? ? }
? },
}
</javascript>
其中你可能會(huì)碰到圖片上傳一次后不能再次上傳同一張圖片的坑，因?yàn)閕nput在上傳文件時(shí)候比較特殊，所以我們需要處理一下
document.getElementById('uploads').value = null? 獲取input ,在每次上傳結(jié)束后把他的值清空，
