antd vue(Ant Design Vue) upload组件
upload上传图片,不请求接口先预览图片window.URL.createObjectURL可以用于在浏览器上预览本地图片或者视频customRequest通过覆盖默认的上传行为,可以自定义自己的上传实现<template><div style="margin: 24px"><a-upload:file-list="fileList":customRequest="
·
upload上传图片,不请求接口先预览图片
- window.URL.createObjectURL 可以用于在浏览器上预览本地图片或者视频
- customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现
<template>
<div style="margin: 24px">
<a-upload
:file-list="fileList"
:customRequest="customRequest"
list-type="picture"
>
<a-button> <a-icon type="upload" /> upload </a-button>
</a-upload>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
fileList: [],
};
},
methods: {
customRequest(obj) {
let rep = {
uid: obj.file.uid,
name: obj.file.name,
status: "done",
url: window.URL.createObjectURL(obj.file),
thumbUrl: window.URL.createObjectURL(obj.file),
};
this.fileList.push(rep);
// obj.onProgress({ percent: 100 });
// obj.onSuccess(window.URL.createObjectURL(obj.file), obj.file);
console.log(obj.file, window.URL.createObjectURL(obj.file), "pbj");
},
},
};
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)