|
|
|
|
@ -9,10 +9,11 @@ |
|
|
|
|
<el-upload |
|
|
|
|
v-if="item.type === 'upload'" |
|
|
|
|
class="uploader" |
|
|
|
|
accept=".jpg,.png,.jpeg" |
|
|
|
|
:on-success="res => uploadSuccess(res, data.form)" |
|
|
|
|
accept=".jpg,.png,.jpeg,.gif" |
|
|
|
|
:on-change="res => changeFile(res, data.form)" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
:action="api.upload"> |
|
|
|
|
:action="api.upload" |
|
|
|
|
:auto-upload="false"> |
|
|
|
|
<img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar"> |
|
|
|
|
<div class="uploader-default" v-else> |
|
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
|
@ -39,17 +40,32 @@ |
|
|
|
|
<el-button type="primary" @click="contentSubmit">确定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
<Link ref="link" :visible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" /> |
|
|
|
|
|
|
|
|
|
<!-- 剪裁组件弹窗 --> |
|
|
|
|
<el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false"> |
|
|
|
|
<Cropper |
|
|
|
|
ref="cropper" |
|
|
|
|
:img-file.sync="file" |
|
|
|
|
:is-upload="isUpload" |
|
|
|
|
:fixed="fixed" |
|
|
|
|
:fixedNumber.sync="fixedNumber" |
|
|
|
|
@upload="customUpload" /> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import Link from '@/components/modules/link' |
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
import Cropper from '@/components/img-upload/Cropper' |
|
|
|
|
import Axios from 'axios' |
|
|
|
|
export default { |
|
|
|
|
props: ['data', 'visible'], |
|
|
|
|
components: { |
|
|
|
|
Link |
|
|
|
|
Link, |
|
|
|
|
Cropper |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
@ -57,6 +73,13 @@ export default { |
|
|
|
|
linkVisible: false, |
|
|
|
|
linkForm: {}, |
|
|
|
|
curIndex: 0, |
|
|
|
|
cropperModel: false, |
|
|
|
|
isUpload: false, |
|
|
|
|
file: {}, // 当前被选择的图片文件 |
|
|
|
|
fileId: '', |
|
|
|
|
curForm: {}, |
|
|
|
|
fixed: false, |
|
|
|
|
fixedNumber: [0.88, 1] |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
@ -75,6 +98,14 @@ export default { |
|
|
|
|
// 这两张类型的模块才需要处理参数 |
|
|
|
|
if (type === 'form' || type === 'introduce') { |
|
|
|
|
forms.map(e => { |
|
|
|
|
if (e.type === 'upload') { |
|
|
|
|
if (e.fixedNumber) { |
|
|
|
|
this.fixed = true |
|
|
|
|
this.fixedNumber = e.fixedNumber |
|
|
|
|
} else { |
|
|
|
|
this.fixed = false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (e.required) { |
|
|
|
|
this.rules[e.prop] = [ |
|
|
|
|
{ |
|
|
|
|
@ -90,12 +121,88 @@ export default { |
|
|
|
|
close() { |
|
|
|
|
this.$emit('update:visible', false) |
|
|
|
|
}, |
|
|
|
|
// 上传成功 |
|
|
|
|
uploadSuccess(res, row) { |
|
|
|
|
// let url = this.form.columnBanner |
|
|
|
|
// url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {}) |
|
|
|
|
this.$set(row, 'pic', res.url) |
|
|
|
|
// row.pic = res.url |
|
|
|
|
// 图片裁剪上传事件 |
|
|
|
|
customUpload(data) { |
|
|
|
|
const blob = this.dataURItoBlob(data) |
|
|
|
|
const formData = new FormData() |
|
|
|
|
formData.append('file', blob, this.file.name) |
|
|
|
|
this.imgUpload(formData) |
|
|
|
|
}, |
|
|
|
|
// 压缩图片 |
|
|
|
|
compress(img) { |
|
|
|
|
const canvas = document.createElement('canvas') |
|
|
|
|
const ctx = canvas.getContext('2d') |
|
|
|
|
// let initSize = img.src.length; |
|
|
|
|
const width = img.width |
|
|
|
|
const 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) |
|
|
|
|
// 进行压缩 |
|
|
|
|
const ndata = canvas.toDataURL('image/jpeg', 0.8) |
|
|
|
|
return ndata |
|
|
|
|
}, |
|
|
|
|
// base64转成bolb对象 |
|
|
|
|
dataURItoBlob(base64Data) { |
|
|
|
|
let byteString |
|
|
|
|
if (base64Data.split(',')[0].indexOf('base64') >= 0) { |
|
|
|
|
byteString = atob(base64Data.split(',')[1]) |
|
|
|
|
} else { |
|
|
|
|
byteString = unescape(base64Data.split(',')[1]) |
|
|
|
|
} |
|
|
|
|
const mimeString = base64Data |
|
|
|
|
.split(',')[0] |
|
|
|
|
.split(':')[1] |
|
|
|
|
.split(';')[0] |
|
|
|
|
const ia = new Uint8Array(byteString.length) |
|
|
|
|
for (let i = 0; i < byteString.length; i++) { |
|
|
|
|
ia[i] = byteString.charCodeAt(i) |
|
|
|
|
} |
|
|
|
|
return new Blob([ia], { |
|
|
|
|
type: mimeString |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 图片上传到服务器 |
|
|
|
|
imgUpload(formData) { |
|
|
|
|
this.isUpload = true |
|
|
|
|
Axios({ |
|
|
|
|
method: 'post', |
|
|
|
|
url: this.api.upload, |
|
|
|
|
data: formData, |
|
|
|
|
headers: { |
|
|
|
|
'Content-Type': 'multipart/form-data' |
|
|
|
|
}, |
|
|
|
|
}).then(({ data }) => { |
|
|
|
|
this.$set(this.curForm, 'pic', data.url) |
|
|
|
|
}).catch(res => {}) |
|
|
|
|
this.$refs.cropper.isDisabled = false |
|
|
|
|
this.isUpload = false |
|
|
|
|
this.cropperModel = false |
|
|
|
|
}, |
|
|
|
|
// 图片改变钩子 |
|
|
|
|
changeFile(file, form) { |
|
|
|
|
const { size, name } = file |
|
|
|
|
const ext = name.substring(name.lastIndexOf('.') + 1) |
|
|
|
|
if (!Util.isImg(ext)) { |
|
|
|
|
this.$message.error('请上传图片！') |
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|
if (size / 1024 / 1024 > 5) { |
|
|
|
|
this.$message.error('请上传5M以内的图片！') |
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|
this.file = file |
|
|
|
|
this.curForm = form |
|
|
|
|
this.cropperModel = true |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.$refs.cropper.updateImg({ |
|
|
|
|
url: window.URL.createObjectURL(file.raw), |
|
|
|
|
size: file.size |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 展示链接设置 |
|
|
|
|
toLink(row, i = 0) { |
|
|
|
|
|
