ant-design vue上传 多文件 、单文件上传
ant-design vue上传 多文件 、单文件上传上传按钮在data中声明fileList对象用来保存文件数据,本次实验限制上传数量最多为3个,单文件上传方式每次获取 file对象里的file文件即可// 移除图片handleRemovevideo(file){const index = this.fileList.indexOf(file);const newFileList = this.
·
ant-design vue上传 多文件 、单文件上传
上传按钮
在data中声明fileList对象用来保存文件数据,本次实验限制上传数量最多为3个,单文件上传方式每次获取 file对象里的file文件即可
// 移除图片
handleRemovevideo(file){
const index = this.fileList.indexOf(file);
const newFileList = this.fileList.slice();
newFileList.splice(index, 1);
this.fileList = newFileList;
},
//上传图片之前的校验
beforeUploadFilevideo(file) {
const { $message } = this
if(this.fileList.length == 3){
$message.warn("只能上传3个文件")
const newFileList = this.fileList.slice();
newFileList.splice(-1, 1);
//只取前3个
this.fileList = newFileList
}else{
this.fileList = [...this.fileList, file]
}
//获得允许上传的文件类型
var type = this.$refs.files.$attrs['data-type']
//采用遍历方式判断文件类型和大小是否都符合规则,也可以只校验当前文件
//const index = this.fileList.indexOf(file); 拿到文件索引之后再判断
for (let item of this.fileList) {
var exName = item.name.split('.')[1] //获得文件后缀名
if(type.indexOf(exName) === -1){//类型不受支持
$message.error('请检查文件类型,只允许上传图片文件')
const index = this.fileList.indexOf(file);
this.fileList.splice(index,1)
break;
}
//判断文件大小
if (item.size/1024/1024 > 20) {
$message.error('上传文件大小不能超过20MB')
break;
}
item.preview = getBase64(item.originFileObj)
}
return false;
},
//上传当前图片,每次校验完毕及时上传,需要使用formData 方式,不然问题可能很多
handleChangeVideo(file){
const { $message } = this
const formData = new FormData()
formData.append('file', file.file)
this.fileList = file.fileList
upload(formData)
.then(res=>{
if(res.code == 200){
$message.success(res.msg)
}else if (res.code == 500){
$message.error(res.msg)
}else(
$message.error(res.msg)
)
})
.catch(err=>{
$message.error(err.message)
})
},
//上传文件 api ,需要加headers
export function uploadInstrument(parameter) {
return axios({
headers: { 'Content-Type': 'multipart/form-data' },
url: api.upload,
method: 'post',
data: parameter
})
}
后端代码具体上传文件方法自己实现即可
如有不正确或更好的方式,请大家多多指正!!!
更多推荐
已为社区贡献1条内容
所有评论(0)