<template>
<!--
上传控件
用法：
<upload-widget v-model="imgUrl"></upload-widget>
-->
<div class="clearfix">
<a-upload
:action="manageApi + '/thumbController/upload.do'"
:data="fileUrl"
list-type="picture-card"
:file-list="fileInfos"
:headers="headers"
@preview="handlePreview"
@change="handleChange"
:remove="handelRemove"
accept="image/*"
:showUploadList="{ showPreviewIcon: this.showPreviewIcon, showRemoveIcon: this.showRemoveIcon }"（显示眼睛和隐藏判断）
>
<a-icon type="plus" />
<div class="ant-upload-text">Upload</div>
</a-upload>
<!-- 图片预览 -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%; height: 100%" :src="previewImage" />
</a-modal>
</div>
</template>
<script>
import axios from 'axios';
/**把图片转成BASE64 */
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
export default {
name: 'UploadAlbumWidget',
model: {
prop: 'fileList',
event: 'change',
},
props: {
//最大上传数量
maxUploadNum: {
type: Number,
default: 1,
},
/**文件列表 */
fileList: {
type: [Array, String],
default() {
return '';
},
},
type: {
type: String,
},
showPreviewIcon: {
type: Boolean,
default() {
return true;
},
},
showRemoveIcon: {
type: Boolean,
default() {
return true;
},
},
},
data() {
return {
headers: {}, //头
previewVisible: false,
previewImage: '',
fileInfos: [], //上传文件
};
},
created() {
// this.initVModelData();
/**默认添加验证token */
this.headers = {
token: this.store.user.token,
adminToken: this.store.admin.token,
};
},
methods: {
fileUrl() {
return {
type: this.type,
};
},
/**处理初始v-model数据 */
initVModelData() {
let that = this;
console.log('initVModelData', this.fileList);
//判断文件上传是否多个
if (this.fileList) {
//多文件
that.fileList.forEach((fl, index) => {
that.fileInfos.push({
uid: '-' + index,
name: '图集',
status: 'done',
url: process.env.VUE_APP_IMAGE_SERVER + fl.imgPath,（process.env.VUE_APP_IMAGE_SERVER =》》》》
）
thumbUrl: process.env.VUE_APP_IMAGE_SERVER + fl.thumbPath,
response: {
data: [{ id: fl.id }],
},
});
});
// }
}
},
handleCancel() {
this.previewVisible = false;
},
/**预览图 */
async handlePreview(file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
console.log('handlePreview', file);
this.previewImage = file.thumbUrl || file.preview;
this.previewVisible = true;
},
handleChange({ fileList }) {
this.fileInfos = fileList;
},
handelRemove(file) {
console.log('handelRemove ');
let result = axios({
method: 'post',
url: `thumbController/del.do`,
data: {
id: file.response.data[0].id,
},
});
if (result.data.code == 200) {
this.$message.success('删除成功');
} else {
this.$message.error(result.data.message);
return false;
}
},
},
watch: {
/**检测v-model数据是否发生改变 */
fileList(val) {
this.initVModelData();
},
},
};
</script>
<style scoped>
.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>
vue多图片上传组件的相关教程结束。
