功能实现:
这个组件很简单。根据你的action的地址,提交post请求
el-upload本身可以发送各种内容(图片,视频等等),后端使用MultipartFile接受,发送文件过大时(比如视频)会失败,在后端链接中说明了如何解决
<template>
<div>
<el-upload :action="this.uploadUrl"
list-type="picture-card"
:auto-upload="true"
ref="upload"
multiple
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
show-file-list>
<i slot="default"
class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%"
:src="dialogImageUrl"
alt="">
</el-dialog>
</div>
</template>
<script>
import axios from "axios"
export default {
data () {
return {
dialogImageUrl: '',
dialogVisible: false,
uploadUrl:'http://localhost:9000/management/good/upload/',
deleteUrl:'http://localhost:9000/management/good/delete/'
};
},
methods: {
handleRemove (file) {
axios.delete(this.deleteUrl+file.response.data.uri).then(response => {
})
},
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
}
}
</script>
介绍:
- list-type:文件列表的类型(横着的还是竖着的等等)
-
multiple:选择文件是否支持多选
-
auto-upload:是否在选取文件后立即进行上传
-
limit:最大允许上传个数
-
show-file-list:是否显示已上传文件列表
handleRemove
handleRemove (file) {
axios.delete(this.deleteUrl+file.response.data.uri).then(response => {
})
},
handleRemove 点击删除会将前端显示的删除,之后你就要根据的后端,进行删除
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
放大你的那张图片