添加缩略图，和上传图片的组件，上传图片的组件我是从 vue-element-admin 中进行拷贝过来的，如果你想使用和我不同的上传组件可以自行去弄一个，我的话就使用 vue-element-admin 提供的了，下载 vue-element-admin
下载地址：https://github.com/PanJiaChen/vue-element-admin
在添加创作者页面当中导入该组件
import imageCropper from "@/components/ImageCropper";
import panThumb from "@/components/PanThumb";
components: {imageCropper, panThumb},
修改添加页面，添加缩略图
<el-form-item>
<pan-thumb :width="String('100px')" :height="String('100px')" :image="String(author.avatar)"/>
</el-form-item>
上传文件
上传界面
<el-form-item>
<pan-thumb :width="String('100px')" :height="String('100px')" :image="String(author.avatar)"/>
<el-button type="primary" @click="imageCropperShow=true">上传头像</el-button>
<!--
上传头像的界面
-->
<image-cropper
v-show="imageCropperShow"
:width="500"
:height="300"
:key="cropperKey"
:url="BASE_API+'/service_upload/file/uploadOssFile'"
field="file"
@close="close"
@crop-upload-success="cropSuccess"
/>
</el-form-item>
事件处理
data() {
return {
author: {
// 排序默认值
sort: 0,
level: 1
},
imageCropperShow: false,
cropperKey: 0,
BASE_API: process.env.VUE_APP_BASE_API
}
},
close() {
// 关闭弹框
this.imageCropperShow = false;
// 该代码可以清空上传组件的默认样式，也就是说每次弹出来的窗口都是新的
this.cropperKey = this.cropperKey + 1;
},
cropSuccess(data) {
// 关闭弹框
this.imageCropperShow = false;
// 显示图片
this.author.avatar = data.url;
this.cropperKey = this.cropperKey + 1;
}
如上内容都完成好了之后，测试上传效果图如下所示
