vue+elementUI上传图片笔记总结

有裁剪框

上传图片组件：

 <template slot="iconForm"><el-uploadclass="avatar-uploader":before-upload="beforeUpload":http-request="httpRequest":on-success="handleAvatarSuccess":show-file-list="false">//有图片时显示上传图片<img v-if="form.icon" :src="form.icon" alt="icon" class="avatar" />//无图片时显示默认图标<em v-else class="el-icon-plus avatar-uploader-icon"></em>//修改和新增转态显示<div v-if="tipShow" slot="tip" class="el-upload__tip">尺寸应为 82 * 82, 且不超过 500 k 的 jpg / png 文件</div>//删除<div v-if="form.icon && formType === 'edit'" class="uploader-operate" @click.stop="form.icon = ''"><em style="margin-left: 20px" class="el-icon-delete"></em></div></el-upload></template>

裁剪弹框：

 <el-dialog title="图片裁剪预览" append-to-body :visible.sync="showImageCropper" width="40%"><vueCropperref="cropper"style="height: 400px"//截图框移动:can-move="option.canMove"//截图框拖动:can-move-box="option.canMoveBox":fixed-box="option.fixedBox":img="cropOption.image":fixed="cropOption.fixed":height="cropOption.height":outputSize="cropOption.size":outputType="cropOption.type":autoCrop="cropOption.autoCrop":autoCropWidth="cropOption.autoCropWidth":autoCropHeight="cropOption.autoCropHeight":original="cropOption.original"></vueCropper><span slot="footer" class="dialog-footer">//点击确定上传图片<el-button type="primary" @click="imageCropper">确 定</el-button></span></el-dialog>

上传前校验：

 beforeUpload(file) {// 上传前校验const isJPG = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);const isLt500k = file.size / 1024 / 1024 < 0.5;if (!isJPG) {this.$message.warning('外部图标只能是 jpg / png 格式');return false;}if (!isLt500k) {this.$message.warning('外部图标大小不能超过 500k');return false;}this.cropOption.image = window.URL.createObjectURL(file);// 打开裁剪框this.showImageCropper = true;

裁剪并上传图片：

 // 裁剪并上传图片imageCropper() {//获取裁剪框的图片信息this.$refs.cropper.getCropBlob(data => {const file = new File([data], 'icon.png', {type: data.type,lastModified: Date.now(),});//格式化图片const formData = new FormData();//添加属性formData.append('file', file, file.name);const loading = this.$loading({lock: true,text: '图片上传中, 请稍后...',spinner: 'el-icon-loading',});//请求接口axios.post('/api/spang-system/oss/endpoint/put-file', formData, {headers: { 'Content-Type': 'multipart/form-data' },}).then(res => {loading.close();if (res.status && res.status === 200) {this.$set(this.form, 'icon', res.data.data.link);this.showImageCropper = false;}}).catch(e => {loading.close();this.$message.error(`图片上传失败！${JSON.stringify(e)}`);}).finally(() => {loading.close();});});},

取消裁剪框并验证尺寸

上传时获取图片并处理

因为不需要裁剪框，先注释掉裁剪框代码，之前是通过裁剪框的确定按钮上传图片的，现在没有裁剪框，要怎么上传图片呢？在上传前的较校验部分调用上传图片的函数，要注意的是，之前的上传操作中的图片是通过裁剪弹框组件自带属性来获取，现在没有裁剪框，要怎么拿到图片并上传呢？
通过beforeUpload(file)参数file,在beforeUpload(file)中调用上传函数this.imageCropper(file)传入参数file,上传时就可以获取到图片信息并上传了。
具体实现中会有点小问题，裁剪上传通过如下：

imageCropper() {this.$refs.cropper.getCropBlob(data => {const file = new File([data], 'icon.png', {type: data.type,lastModified: Date.now(),});

猜测：cropper和getCropBlob要同时使用，单独使用getCropBlob并不能拿到东西？？？
总之，对file的处理参考了网上的简单方法，直接去掉imageCropper部分，file参数本来就传递数据，不用再定义变量来接收了,直接进行如下操作：

 const formData = new FormData();formData.append('file', file, file.name);

这样就可以成功上传了

不符合尺寸时会提示，不会上传

添加尺寸校验

代码如下：

const isSize = new Promise(function (resolve, reject) {const width = 82; // 限制图片尺寸const height = 82;const URL = window.URL || window.webkitURL;const img = new Image();img.onload = function () {const valid = img.width === width && img.height === height;valid ? resolve() : reject();};img.src = URL.createObjectURL(file);}).then(//valid为true时调用resolve()() => {return true;},//valid为false时调用reject()() => {this.$message.warning('外部图标尺寸应为 82 * 82');return false;});isSize.then(res => {console.log('res', res);if (isJPG && isLt500k && res) {this.imageCropper(file);}});console.log(isSize);

需要注意的是， isSize返回的是promise对象，valid为true时返回值是true，valid为false时返回值是false,如果直接判断isSize来调用this.imageCropper(file)，判断不生效，因为返回的不是空对象，都会执行上传操作，就会造成不符合尺寸的图片会提示尺寸不符合，但仍会成功上传

所以通过then方法来取到我们所需要的PromiseResult值，PromiseResult就是返回的Promise对象返回的布尔值，如下：

isSize.then(res => {console.log('res', res);if (isJPG && isLt500k && res) {this.imageCropper(file);}});},

在then函数中，拿到 PromiseResult的值后直接进行上传判断即可。
最终的上传和校验代码如下：

 //上传图片imageCropper(file) {const formData = new FormData();formData.append('file', file, file.name);const loading = this.$loading({lock: true,text: '图片上传中, 请稍后...',spinner: 'el-icon-loading',});axios.post('/api/spang-system/oss/endpoint/put-file', formData, {headers: { 'Content-Type': 'multipart/form-data' },}).then(res => {loading.close();if (res.status && res.status === 200) {this.$set(this.form, 'icon', res.data.data.link);this.showImageCropper = false;}}).catch(e => {loading.close();this.$message.error(`图片上传失败！${JSON.stringify(e)}`);}).finally(() => {loading.close();});},// 图片上传前校验beforeUpload(file) {const isJPG = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);const isLt500k = file.size / 1024 / 1024 < 0.5;if (!isJPG) {this.$message.warning('外部图标只能是 jpg / png 格式');return false;}if (!isLt500k) {this.$message.warning('外部图标大小不能超过 500k');return false;}const isSize = new Promise(function (resolve, reject) {const width = 82; // 限制图片尺寸为const height = 82;const URL = window.URL || window.webkitURL;const img = new Image();img.onload = function () {const valid = img.width === width && img.height === height;valid ? resolve() : reject();};img.src = URL.createObjectURL(file);}).then(() => {return true;},() => {this.$message.warning('外部图标尺寸应为 82 * 82');return false;});console.log('isSize', isSize);isSize.then(res => {console.log('res', res);if (isJPG && isLt500k && res) {this.imageCropper(file);}});},

vue+elementUI上传图片相关推荐

Vue+Element-UI 上传图片，打开相机，相册
Vue+Element-UI 上传图片,打开相机,相册 Element-UI中提供的Upload组件,是用来上传文件用的,并没有单独的纯用来上传图片的组件,所以,在部分浏览器(手机)中,打开后会发现是 ...
前端vue+element-ui上传图片至七牛，并返回外链URL至后台
前端vue+element-ui上传图片至七牛,并返回外链URL至后台上传文件到七牛云代码 2019/08/12 上传文件到七牛云注册登陆到七牛云,需要认证信息才能创建个人存储空间; 注册等步骤 ...
Vue Element-ui上传图片踩坑
Element-ui上传图片踩坑使用Element-ui组件上传图片时,使用自带的action发起上传请求时碰到400错误错误代码 <el-uploadclass="upload- ...
vue elementui 上传图片限制格式、大小和尺寸
需求: 上传图片的格式为:.jpg..jpeg..png 大小为:1M以内尺寸为:400*400 代码实现: 直接拿的elementui官网的html代码,加了一句:accept="ima ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
基于ruoyi+vue+elementUI实现列表，新增，附件上传，tab+springBoot+mybatis+oracle序列+批量新增
基于ruoyi+vue+elementUI实现列表,新增,附件上传,tab+springBoot+mybatis+oracle序列+批量新增页面效果列表页面新增页面详情页面代码实现列表+新 ...

vue+elementUI上传图片