elementUI怎么使用el-upload上传文件

Element Upload 上传

Element Upload官方文档：el-upload

注意点以及坑

本地上传想要回显图片视频，使用on-success是没办法再在上传后获取到本地文件路径后进行回显的，因为只有在上传的action成功，即不报错的情况下才会调用，本地上传用的action="#这个接口不存在，所以也不会上传成功，更不会调用获取到文件参数进行回显

如果想要先在本地进行回显，然后再上传的话，需要使用on-change钩子（还需:auto-upload ="false"）获取文件本地路径，再生成一个formData传给后端上传文件的接口，

elementUI怎么使用el-upload上传文件

官方文档中提供的上传图片接口https://jsonplaceholder.typicode.com/posts/现已无法使用

elementUI怎么使用el-upload上传文件

下面给大家总结几种常用的上传文件方法：

el-upload上传文件用法总结

1. 上传单张图片到服务器并进行回显，不可删除只能替换

这种上传单张图片的运行场景一般是上传头像，没有删除功能，只能进行替换

2. 拖拽上传单张图片到本地回显再上传到服务器，可删除

可以手动上传，也可以拖拽上传，图片可以在没有后端上传接口时进行回显，可删除
template:

uploadFile(item) { console.log(item); let formData = new FormData(); let file = item.raw; this.imageUrl1 = URL.createObjectURL(file); formData.append("file", file); // 传formData给后台就行 // 比如 // 接口(formData).then(res=>{ // this.videoUrl=res.url // }) }, // 删除只需清空imageUrl1即可 handleRemove1(file, fileList) { // console.log(file, fileList); this.imageUrl1 = ""; },

elementUI怎么使用el-upload上传文件

elementUI怎么使用el-upload上传文件

Element Upload 上传

注意点以及坑

el-upload上传文件用法总结

1. 上传单张图片到服务器并进行回显，不可删除只能替换

2. 拖拽上传单张图片到本地回显再上传到服务器，可删除

3. 多图上传到服务器，可回显预览删除