|
|
@@ -16,8 +16,8 @@ import { CirclePlus, Remove } from '@element-plus/icons-vue'
|
|
|
import iconRate from '../col-upload/images/icon_rate.png'
|
|
|
import request from '@/helpers/request'
|
|
|
|
|
|
-import Cropper from "cropperjs";
|
|
|
-import "cropperjs/dist/cropper.css";
|
|
|
+import Cropper from 'cropperjs'
|
|
|
+import 'cropperjs/dist/cropper.css'
|
|
|
export default defineComponent({
|
|
|
name: 'cropper',
|
|
|
props: {
|
|
|
@@ -37,6 +37,7 @@ export default defineComponent({
|
|
|
data() {
|
|
|
return {
|
|
|
ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
|
|
|
+ preOssUploadUrl: `https://${this.bucket}.ks3-cn-beijing.ksyuncs.com/`,
|
|
|
dataObj: {
|
|
|
policy: '',
|
|
|
signature: '',
|
|
|
@@ -66,7 +67,7 @@ export default defineComponent({
|
|
|
upload: '/sys/common/saveToImgByStr'
|
|
|
},
|
|
|
submitLoading: false,
|
|
|
- myCropper:null as any
|
|
|
+ myCropper: null as any
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -87,57 +88,59 @@ export default defineComponent({
|
|
|
* 确认截图
|
|
|
*/
|
|
|
okHandel() {
|
|
|
- ;(this as any).myCropper.getCroppedCanvas({
|
|
|
- imageSmoothingQuality: 'high'
|
|
|
- }).toBlob(async data => {
|
|
|
- this.submitLoading = true
|
|
|
- const options: any = this.options
|
|
|
- const fileName =
|
|
|
- (options.name ? options.name.split('.')[0] : +new Date()) + '.png'
|
|
|
- try {
|
|
|
- let key = new Date().getTime() + fileName
|
|
|
- let obj = {
|
|
|
- filename: fileName,
|
|
|
- bucketName: this.bucket,
|
|
|
- postData: {
|
|
|
+ ;(this as any).myCropper
|
|
|
+ .getCroppedCanvas({
|
|
|
+ imageSmoothingQuality: 'high'
|
|
|
+ })
|
|
|
+ .toBlob(async data => {
|
|
|
+ this.submitLoading = true
|
|
|
+ const options: any = this.options
|
|
|
+ const fileName =
|
|
|
+ (options.name ? options.name.split('.')[0] : +new Date()) + '.png'
|
|
|
+ try {
|
|
|
+ let key = new Date().getTime() + fileName
|
|
|
+ let obj = {
|
|
|
filename: fileName,
|
|
|
- acl: 'public-read',
|
|
|
+ bucketName: this.bucket,
|
|
|
+ postData: {
|
|
|
+ filename: fileName,
|
|
|
+ acl: 'public-read',
|
|
|
+ key: key,
|
|
|
+ unknowValueField: []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const res = await request.post('/api-website/getUploadSign', {
|
|
|
+ data: obj
|
|
|
+ })
|
|
|
+ this.dataObj = {
|
|
|
+ policy: res.data.policy,
|
|
|
+ signature: res.data.signature,
|
|
|
key: key,
|
|
|
- unknowValueField: []
|
|
|
+ KSSAccessKeyId: res.data.kssAccessKeyId,
|
|
|
+ acl: 'public-read',
|
|
|
+ name: fileName
|
|
|
}
|
|
|
- }
|
|
|
- const res = await request.post('/api-website/getUploadSign', {
|
|
|
- data: obj
|
|
|
- })
|
|
|
- this.dataObj = {
|
|
|
- policy: res.data.policy,
|
|
|
- signature: res.data.signature,
|
|
|
- key: key,
|
|
|
- KSSAccessKeyId: res.data.kssAccessKeyId,
|
|
|
- acl: 'public-read',
|
|
|
- name: fileName
|
|
|
- }
|
|
|
|
|
|
- let formData = new FormData()
|
|
|
- for (let key in this.dataObj) {
|
|
|
- formData.append(key, this.dataObj[key])
|
|
|
+ let formData = new FormData()
|
|
|
+ for (let key in this.dataObj) {
|
|
|
+ formData.append(key, this.dataObj[key])
|
|
|
+ }
|
|
|
+ // this.blobToFile(data, fileName)
|
|
|
+ formData.append('file', data, fileName)
|
|
|
+ await umiRequest(this.ossUploadUrl, {
|
|
|
+ method: 'POST',
|
|
|
+ data: formData
|
|
|
+ })
|
|
|
+ console.log(this.preOssUploadUrl + key)
|
|
|
+ const uploadUrl = this.preOssUploadUrl + key
|
|
|
+ this.cropperOk(uploadUrl)
|
|
|
+ } catch (err: any) {
|
|
|
+ ElMessage.error(err)
|
|
|
+ } finally {
|
|
|
+ this.submitLoading = false
|
|
|
+ this.cancelHandel()
|
|
|
}
|
|
|
- // this.blobToFile(data, fileName)
|
|
|
- formData.append('file', data, fileName)
|
|
|
- await umiRequest(this.ossUploadUrl, {
|
|
|
- method: 'POST',
|
|
|
- data: formData
|
|
|
- })
|
|
|
- console.log(this.ossUploadUrl + '/' + key)
|
|
|
- const uploadUrl = this.ossUploadUrl + '/' + key
|
|
|
- this.cropperOk(uploadUrl)
|
|
|
- } catch (err: any) {
|
|
|
- ElMessage.error(err)
|
|
|
- } finally {
|
|
|
- this.submitLoading = false
|
|
|
- this.cancelHandel()
|
|
|
- }
|
|
|
- })
|
|
|
+ })
|
|
|
},
|
|
|
//转成blob
|
|
|
blobToFile(Blob: any, fileName: any) {
|
|
|
@@ -174,7 +177,7 @@ export default defineComponent({
|
|
|
rotateRight() {
|
|
|
;(this as any).$refs.cropperRef.rotateRight()
|
|
|
},
|
|
|
- initImgCropper(){
|
|
|
+ initImgCropper() {
|
|
|
this.myCropper = new Cropper((this as any).$refs.imgCropper, {
|
|
|
viewMode: 1, //定义裁剪器的视图模式。如果将viewMode设置为0，则裁剪框可以延伸到画布外部，而值为1、2或3将限制裁剪框的大小为画布的大小。viewMode为2或3会将画布限制为容器。请注意，如果画布和容器的比例相同，则2和3之间没有差别。
|
|
|
dragMode: 'move', //定义的拖动模式裁剪器.canvas和容器一样，2和3没有区别。move:移动画布 crop:创建新的裁剪框（默认） none:什么也不做
|
|
|
@@ -201,7 +204,9 @@ export default defineComponent({
|
|
|
closeOnClickModal={false}
|
|
|
width={'900px'}
|
|
|
destroyOnClose={true}
|
|
|
- onOpened={()=>{this.initImgCropper()}}
|
|
|
+ onOpened={() => {
|
|
|
+ this.initImgCropper()
|
|
|
+ }}
|
|
|
v-slots={{
|
|
|
footer: () => (
|
|
|
<span class="dialog-footer !text-center block">
|
|
|
@@ -224,9 +229,15 @@ export default defineComponent({
|
|
|
>
|
|
|
<ElRow>
|
|
|
<ElCol xs={24} md={12} style={{ width: '350px' }}>
|
|
|
- <div class={styles.imgwarp}>
|
|
|
- <img ref="imgCropper" id="myImages" src={this.options.img} alt="" style={{ height: '350px' }}/>
|
|
|
- </div>
|
|
|
+ <div class={styles.imgwarp}>
|
|
|
+ <img
|
|
|
+ ref="imgCropper"
|
|
|
+ id="myImages"
|
|
|
+ src={this.options.img}
|
|
|
+ alt=""
|
|
|
+ style={{ height: '350px' }}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
{/* <VueCropper
|
|
|
ref="cropperRef"
|
|
|
img={this.options.img}
|
|
|
@@ -278,11 +289,12 @@ export default defineComponent({
|
|
|
<div class={styles.previewImg}>
|
|
|
<span>预览图片</span>
|
|
|
<div
|
|
|
- class={
|
|
|
- [this.options.previewsCircle
|
|
|
+ class={[
|
|
|
+ this.options.previewsCircle
|
|
|
? styles['avatar-upload-preview']
|
|
|
- : styles['avatar-upload-preview_range'], 'before']
|
|
|
- }
|
|
|
+ : styles['avatar-upload-preview_range'],
|
|
|
+ 'before'
|
|
|
+ ]}
|
|
|
style={{
|
|
|
width: this.options.autoCropWidth + 'px',
|
|
|
height: this.options.autoCropHeight + 'px'
|
