ant-design-vue之upload⽂件上传ant-design-vue 之upload ⽂件上传
01) 单⽂件上传
使⽤  :before-upload="beforeUpload"  和  @change="handleChange"
<template>
<div>
<div>图⽚名字: {{imgName}}</div><br /><br /><br />
<a-upload
name="file"
:multiple="true"
:before-upload="beforeUpload"
:
file-list="fileList"
@change="handleChange">
<a-button><a-icon type="upload"/> Click to Upload </a-button>
</a-upload>
</div>
</template>
<script>
/* 这是ant-design-vue */
import Vue from 'vue'
import Antd, { message,Select } from 'ant-design-vue'  //这是ant-design-vue
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd);
/* 这是ant-design-vue */
export default {
components:{},
antdesignvue 配置外部文件data() {
return {
imgName: "",
fileStatus: true,
fileList: [],
}
},
methods: {
beforeUpload(file) {
if (pe !== 'image/jpeg') {
this.fileStatus = false;
this.$('只能上传 JPG 格式');
}
this.imgName = file.name;
// 禁⽤原来上传，改⽤⾃定义上传,[ 必须返回false，才能在handleChange使⽤⾃⼰的请求⽅式]
return false;
},
handleChange(info) {
if (this.fileStatus) {
// 开始上传
let fileList = [...info.fileList];
const formData = new FormData();
formData.append("file", fileList[0].originFileObj);
// this.$post("上传URL地址", formData).then(resUpLoadFiles => {
//    console.log(resUpLoadFiles);
// })
fileList = fileList.map(file => {
file.url = "wwwblogs/images/jblogo.png";
return file;
});
this.fileList = fileList;
}
},
},
};
</script>
<style scoped>
</style>
View Code

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。