「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」。
今天我们来讲一讲 Element中的 Upload 上传 ，我们平常写项目，总会遇到需要上传图片的地方，在Element文档中，已经介绍了好几种上传图片的形式，我们今天来模拟一下头像上传，大家都上传过头像，里面是可以对图片进行大小等裁剪选择的。今天我们结合 vue-cropper 对上传的图片进行裁剪
下载插件
npm install vue-cropper
在main.js中引用
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
在拖拽上传的代码改一下部分的内容到我们的vue文件
<el-upload
class="upload-demo"
action=""
drag
:auto-upload="false"
:show-file-list="false"
:on-change="changeUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">点击上传</div>
<div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MB</div>
</el-upload>
drag | 是否启用拖拽上传 保留
multiple ： 是否支持多选文件 我们只要上传一张，取消掉该属性
show-file-list ：是否显示已上传文件列表，默认是true，我们改成false
auto-upload ：是否在选取文件后立即进行上传 ，默认是true
on-change : 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 ,当我们上传上传后会触发这个钩子，这时候我们将图片渲染到弹出的裁剪框
changeUpload查看这个文件大小是否满足要求， dialogVisible是控制裁剪框的显示与隐藏
changeUpload(file, fileList) {
const isLt5M = file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('上传文件大小不能超过 5MB!')
return false
}
//提前存一下文件名字 一会转文件的时候能用
this.fileName = file.name
let url = URL.createObjectURL(file.raw)
// 上传成功后将图片地址赋值给裁剪框显示图片
this.$nextTick(() => {
this.option.img = url
this.dialogVisible = true
})
},
我们分别输出一下 file, fileList， 可以看到file就算该图片的详细信息，fileList就是上传的文件列表，下标为0的是和file相似的内容
<el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
<div class="cropper-content">
<div class="cropper">
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="true"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:autoCrop="option.autoCrop"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:centerBox="option.centerBox"
:infoTrue="option.infoTrue"
:fixedBox="option.fixedBox"
></vueCropper>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="finish" :loading="loading"
>确认</el-button
>
</div>
</el-dialog>
将这些属性值绑定到data，这些都是我们可以根据需要进行修改的
data() {
return {
// fileUrlList: [],
dialogVisible: false,
loading: false,
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成图片的质量
outputType: 'jpeg', // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 400, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度
// fixedBox: true, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [7, 5], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
// picsList: [], //页面显示的数组
fileName: "",
}
},
调整裁剪框的宽高及位置
<style scoped lang='scss'>
.cropper-content {
.cropper {
text-align: center;
width: auto;
height: 400px;
}
}
</style>
可以通过鼠标滑动缩放，还可以通过改变裁剪框的位置大小进行裁剪
// 点击裁剪，这一步是可以拿到处理后的地址
finish() {
this.$refs.cropper.getCropBlob(async (data) => {
let file = new window.File([data], this.fileName, {type: 'image/jpeg'})
var formData = new FormData();
formData.append('file',file);
const { data: resImg } = await this.$http({
url: "/minio/my/upload/net",
method: "post",
headers: {
"Content-Type": "multipart/form-data; boundary=----webKitFormBoundary8A5ernVhiq6kqEZB",
},
data: formData ,
});
let imgUrl = resImg.data ;
console.log( imgUrl );
})
},
然后我们就可以拿到可以在浏览器上查看的图片了，把imgUrl渲染成新的头像就可以啦
下面是看到其他博主整理的资料gitcode.net/mirrors/xyx…
