卓尔高考网

el-upload上传图片

篇首语:本文由小编为大家整理,主要介绍了el-upload上传图片相关的知识,希望对你有一定的参考价值。

参考技术A

方法一:
使用formData

方法二:
使用el-upload

action:请求接口的地址
:on-success:上传成功后的回调,第一个参数是接口返回的数据

url代表接口返回的图片地址,这里后台直接返给我url了
这里只是把图片上传了,但是还需要调用一下保存(更新)的接口

el-upload配合vue-cropper实现上传图片前裁剪

需求背景

上传一个封面图,在上传之前需要对图片进行裁剪,上传裁剪之后的图片,类似微信的上传头像。

技术方案

上传肯定是用element的 el-upload 组件实现上传,非常方便,各种钩子函数。

裁剪一开始找的 cropper 看着功能到是非常齐全,api也比较丰富,基本是符合预期的需求的。但是此库是基于jq 的,在vue项目中有点难用。于是就找到了 vue-cropper 支持组件化的方式,只需要传入相应的配置参数就可以使用,还有一个非常方便的地方是 官网 提供了在线调试页面,更改配置就可以看到效果,配置好之后再把代码复制到项目中,也是相当的方便。

封装组件

上传文件的组件:uploadImg.vue

 

封装裁剪组件 cropper.vue

 

效果截图

 

 

 问题总结

 问题一、如何阻止upload上传完之后就上传?

  将el-upload 的 auto-upload 设置为 false即可

问题二、如何将获取到文件传给vue-cropper?

  vue-cropper 可以接受一个 blob,此时需要 new FileReader(),参考 MDN

问题三、el-upload 选择完文件后不能更改,如何上传裁剪之后的图片?

  此问题在网上查到两种思路:

    1. 使用 this.$refs.fileUpload.$children[0].post(files) 方法可以更改上传的文件,调用此方法就会自动触发文件上,不用在调用submit,但是el-upload内部会报个错,file.status is not defined,并且不会触发before-upload和onsuccess,无法拿到上传之后的结果,具体原因没细查。

    2. 使用自定义上传,点击上传时直接调用submit 方法,这时会自动触发http-request中的自定义方法,可以拿到file中的所有属性,在函数里面使用 axios 自定义上传参数和文件。此方法比较好控制,本文也是采用的次方法进行上传。

 

参考

官方example源代码:https://github.com/xyxiao001/vue-cropper/blob/master/example/src/App.vue

掘金:Vue+element-ui图片上传剪裁组件

 

以上是关于el-upload上传图片的主要内容,如果未能解决你的问题,请参考以下文章

您可能还会对下面的文章感兴趣: