在Vue3中
实现图片上传并使用cropperjs进行图片裁剪，可以通过以下步骤
实现：
1. 安装依赖
首先需要安装`axios`、`cropperjs`和`vue-cropperjs`：
```bash
npm install axios cropperjs vue-cropperjs --save
```
2. 创建上传组件
在Vue3中创建一个上传组件，包括一个上传按钮、一个图片
预览区域和一个裁剪框。
```vue
<template>
<div class="upload">
<div class="upload-btn">
<label for="file-upload">
上传图片</label>
<
input type="file" id="file-upload" accept="image/*" @change="selectImage($event)" />
</div>
<div class="preview">
<img ref="image" :src="imageUrl" />
<vue-cropper ref="cropper" v-if="showCropper"></vue-cropper>
</div>
<div class="actions">
<button v-if="showCropper" @click="cropImage">裁剪</button>
<button v-else @click="startUpload" :disabled="!imageUrl">上传</button>
<button v-if="showCropper" @click="cancelCrop">取消</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
import Cropper from 'cropperjs';
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
export default {
components: {
VueCropper,
},
data() {
return {
imageUrl: '',
showCropper: false,
cropper: null,
file: null,
};
},
methods: {
// 选择图片
selectImage(event) {
this.file = event.target.files[0];
this.imageUrl = URL.createObjectURL(this.file);
this.showCropper = true;
this.$nextTick(() => {
this.initCropper();
});
},
// 初始化裁剪器
initCropper() {
this.cropper = new Cropper(this.$refs.image, {
viewMode: 1,
aspectRatio: 1,
autoCropArea: 1,
crop: () => {
// 裁剪框触发crop事件时，更新裁剪框数据
const data = this.cropper.getData();
this.$emit('update:cropData', data);
},
});
},
// 取消裁剪
cancelCrop() {
this.showCropper = false;
this.file = null;
this.imageUrl = '';
this.$refs.cropper.reset();
this.$refs.image.removeAttribute('src');
this.$refs.image.removeAttribute('style');
this.cropper.destroy();
this.cropper = null;
this.$emit('cancel');
},
// 裁剪图片
cropImage() {
const canvas = this.cropper.getCroppedCanvas();
const croppedImage = canvas.toDataURL('image/jpeg', 0.7);
this.imageUrl = croppedImage;
this.showCropper = false;
this.file = this.dataURLtoFile(croppedImage, 'cropped.jpg');
this.$emit('update:file', this.file);
},
// 文件转换
dataURLtoFile(dataurl, filename) {
const arr = dataurl.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
},
// 开始上传
startUpload() {
const formData = new FormData();
formData.append('file', this.file);
axios.post('/upload', formData).then(() => {
this.$emit('uploadSuccess');
});
},
},
};
</script>
```
3. 通过props传递裁剪框数据
在父组件中使用上传组件，并通过props传递裁剪框数据：
```vue
<template>
<div class="app">
<upload
v-model:file="file"
@uploadSuccess="uploadSuccess"
@cancel="cancelUpload"
:cropData="cropData"
@update:cropData="cropData = $event"
></upload>
</div>
</template>
<script>
import Upload from './components/Upload.vue';
export default {
components: {
Upload,
},
data() {
return {
file: null,
cropData: {},
};
},
methods: {
// 上传成功回调
uploadSuccess() {
console.log('上传成功');
},
// 取消上传回调
cancelUpload() {
console.log('取消上传');
},
},
};
</script>
```
4. 在父组件中处理裁剪框数据
在父组件中，通过监听`update:cropData`事件，获取裁剪框数据，并传递给上传组件：
```vue
<template>
<div class="app">
<upload
v-model:file="file"
@uploadSuccess="uploadSuccess"
@cancel="cancelUpload"
:cropData="cropData"
@update:cropData="cropData = $event"
></upload>
</div>
</template>
<script>
import Upload from './components/Upload.vue';
export default {
components: {
Upload,
},
data() {
return {
file: null,
cropData: {},
};
},
methods: {
// 上传成功回调
uploadSuccess() {
console.log('上传成功');
},
// 取消上传回调
cancelUpload() {
console.log('取消上传');
},
},
};
</script>
```
通过以上四个步骤，在Vue3中就可以
实现图片上传并使用cropperjs进行图片裁剪了。
最低0.47元/天 解锁文章
970
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
