el-upload上传图片

佚名 2024-04-20 16:16:18 举报

篇首语：本文由小编为大家整理，主要介绍了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上传图片的主要内容，如果未能解决你的问题，请参考以下文章