vue.js - 蚂蚁设计上传无法上传大文件
问题描述
在最新版本的 ant-design-vue 中,我们不再能够上传更大的图像。
<template>
<a-upload
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:before-upload="beforeUpload"
@change="handleChange"
>
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
<div v-else>
<a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text">
Upload
</div>
</div>
</a-upload>
</template>
<script>
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
export default {
data() {
return {
loading: false,
imageUrl: '',
};
},
methods: {
handleChange(info) {
if (info.file.status === 'uploading') {
this.loading = true;
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => {
this.imageUrl = imageUrl;
this.loading = false;
});
}
},
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.error('Image must smaller than 2MB!');
}
return isJpgOrPng && isLt2M;
},
},
};
</script>
<style>
.avatar-uploader > .ant-upload {
width: 128px;
height: 128px;
}
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style>
它会回来的
error POST https://www.mocky.io/v2/5cc8019d300000980a055e76 net::ERR_CONNECTION_RESET will produced after upload file. only file around 10-50 mb is allowed.
我已经尝试将操作保留为空,但它将使用路径为 null 的基本域作为 post api。除了创建自己的api之外,还有其他方法可以将操作保留为空,以便它可以直接运行到@change而不是卡在操作中?
解决方案
推荐阅读
- docker - 无法在 kafka connect docker 映像中运行 kafka connect datagen
- spring-boot - 使用 JWT 进行身份验证如何在 Spring Boot 中工作
- swift - 子视图更改SwiftUI后更新视图
- reactjs - Material UI 免费单人自动补全,如何提交数据?
- node.js - 使用 nodegit 克隆带有子模块的 repo
- android - 错误:找不到符号导入 android.widget.selector;
- android - Flutter 应用在 Play 商店发布后卡在白屏
- java - 如何在 Log4j2 的类路径之外设置 JsonTemplateLayout eventTemplateUri
- javascript - DOM 操作执行序列
- vb.net - 将回历日期作为字符串转换为 DateTime 对象