element 限制上传文件格式_Element Upload 上传文件

文件完整的代码块

class="upload-demo"

ref="upload"

action="https://jsonplaceholder.typicode.com/posts/"

:on-change="handleChange"

:file-list="fileList"

:multiple="false"

:http-request="modeUpload"

:before-remove="beforeRemove"

:before-upload="beforeUpload"

:on-exceed="handleExceed">

上传比对文件

export default {

data(){

return{

fileList: [],

}

},

methods:{

// 上传文件让第二次覆盖第一的文件

handleChange(file,fileList){

if (fileList.length>0) {

this.fileList=[fileList[fileList.length-1]];

}

},

// 上传文件请求对应的接口生成需要的值

modeUpload(){

},

// 点击上传文件右边的删除，删除页面对应显示的文件

beforeRemove(){

this.fileList = [];

},

// 上传文件时触发

beforeUpload(file){

var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);

const extension = testmsg === "png";

const extension2 = testmsg === "jpg";

const isLt32M = file.size / 1024 / 1024 < 32;

if (!extension && !extension2) {

this.DonMessage.warning('上传文件只能是png和jpg格式！');

}

if (!isLt32M) {

this.DonMessage.warning('上传文件大小不能超过32MB！');

}

return (extension || extension2) && isLt32M;

},

// 上传的提示

handleExceed(files, fileList){

this.$message.warning('当前只允许上传一个文件');

},

},

beforeRemove使用的情况

image.png

清除上传文件的方法

this.$refs.upload.clearFiles();