基于antdv 1.7版本,实现图片墙UI,图片的base64格式上传、删除、回显及进度条等功能。
1.HTML
<div class="form-item-content" style="width: 560px;">
<div class="clearfix" style="width:100%">
<a-upload :file-list="fileList" list-type="picture-card" accept="image/*"
:custom-request="customRequest" @preview="onPreview" :remove="onImgRemove"
:multiple="false">
<div v-if="fileList.length < 10">
<a-icon type="plus" />
<div class="ant-upload-text">上传</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="onCancel">
<img alt="example" style="width: 100%" :src="previewImage">
</a-modal>
</div>
</div>
2.JS
<script>
export default {
data() {
return {
previewVisible: false,
previewImage: '',
fileList: [],
};
},
methods: {
getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
},
getImgWH(url) {
return new Promise((resolve, reject) => {
const img = new Image();