大家都知道elementUi是与vue配合使用特别好用的一个css样式表,但是在使用其上传功能时会遇到各种各样的问题,下面我就为大家介绍一下我所遇到的问题,希望对于大家有一定的帮助!
elementUI中upload的地址:https://element.eleme.cn/#/zh-CN/component/upload 大家可以参考官方文档
这里我使用的是照片墙这个属性:list-type
```javascript
<el-upload
name="fileUpload"//上传文件的字段名字由后台提供
:data="folderName"//文件存储的文件夹
:action="这里的接口是后台提供的"
list-type="picture-card"
:on-success="successUpdata"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
data{
folderName: {folderName:'ycylManage'},
}
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible =true;
},
//上传成功的方法
successUpdata(file){
this.headImg = file.paths[0] //返回的是图片的路径
},
图片示例:
经过试验这个上传是可以上传视频的,所以推荐大家用这个,上传图片与上传图片是一样的