Element Upload Upload
Element Upload official document: el-upload
specific details only refer to the official document, this article mainly introduces pitfall avoidance and usage summary
Attention points and pits
-
If you want to echo the picture and video for local upload, there
on-successis no way to echo it after getting the local file path after uploading, because it will only be called when the upload isactionsuccessful, that is, no error is reported.action="#This is used for local upload The interface does not exist, so the upload will not be successful, nor will it call to get the file parameters for echo
-
If you want to echo locally first, and then upload, you need to use
on-changethe hook (need to:auto-upload ="false") get the local path of the file, and then generate anformDatainterface for uploading the file to the backend.
-
The upload image interface provided in the official document
https://jsonplaceholder.typicode.com/posts/is no longer available
-
Here is a summary of several commonly used file upload methods :
el-upload upload file usage summary
1. Upload a single image to the server and echo it, it cannot be deleted but can only be replaced
This kind of operation scenario of uploading a single image is generally to upload the avatar, there is no delete function, only to replace
<el-upload
class="avatar-uploader"
action="后端上传接口"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<style>
/deep/ .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
// 上传成功后的回显
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
// 上传前对类型大小的验证
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
}
</script>
2. Drag and drop to upload a single image to the local echo and then upload to the server, it can be deleted
It can be uploaded manually, or uploaded by dragging and dropping. The picture can be echoed when there is no back-end upload interface, and
the template can be deleted:
<el-upload
drag
action="#"
:show-file-list="false"
:auto-upload="false"
:on-change="uploadFile"
accept="image/jpg,image/jpeg,image/png"
>
<i
v-if="imageUrl1"
class="el-icon-circle-close deleteImg"
@click.stop="handleRemove1"
></i>
<img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
<div v-else>
<i
class="el-icon-picture"
style="margin-top: 40px; font-size: 40px; color: #999a9c"
></i>
<div class="el-upload__text1">上传图片</div>
<div class="el-upload__text">* 建议尺寸比例2.2:1，不超过4m，</div>
<div class="el-upload__text">格式为png、jpeg或jpg</div>
</div>
</el-upload>
<style scoped>
.deleteImg {
font-size: 30px;
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
</style>
data:
data() {
return {
imageUrl1: ''
};
},
method:
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 = "";
},
3. Multiple images are uploaded to the server, and can be echoed, previewed and deleted
list-type="picture-card"hover will automatically have a preview delete menu, no need to write the style yourself, just bind the event
<el-upload
action="后端接口地址"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>