最近看到有2023年博客之星的入围状况，提示我还差24篇高质量文章才可以入围。前两年由于比较勤奋，文章篇数足够，因此没有遇到这种提示过。现在补上几篇文章，希望可以入围吧。
1.html代码
<template>
<div class="clearfix">
<a-upload-dragger
:action="`${baseURL}/api/file-management/file/upload`"
:fileList="fileList"
:headers="headers"
@preview="handlePreview"
@change="handleChange"
:multiple="false"
>
<p class="ant-upload-drag-icon">
<a-icon type="inbox" />
</p>
<p class="ant-upload-text">
点击或拖拽实现上传
</p>
<p class="ant-upload-hint">
支持单次或批量上传。严格禁止上传公司数据或其他被禁止的文件。
</p>
</a-upload-dragger>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
</div>
</template>
2.script部分代码
<script>
const uuid = require('uuid');
import Cookie from 'js-cookie';
export default {
props: {
value: {
type: String,
value: '',
},
maxCount: {
type: Number,
default: 1,
},
},
mounted() {
this.refresh();
},
data() {
return {
previewVisible: false,
previewImage: '',
fileList: [],
internelValue: {
},
baseURL: process.env.VUE_APP_API_BASE_URL,
headers: {
Authorization: Cookie.get('Authorization') },
};
},
watch: {
value(val) {
this.value = val;
this.refresh();
},
},
methods: {
multiple() {
return this.maxCount > 1;
},
refresh() {
if (this.maxCount < 1) {
throw 'maxCount必须>=1';
}
if (this.value) {
let urls = [];
urls.push(this.value);
this.fileList = urls.map((x) => {
return {
name: x,
uid: uuid.v4(),
status: 'done',
id: x,
url: `${
this.baseURL}/api/file-management/file/${
x}/getFile`,
};
});
} else {
this.fileList = [];
}
},
handleCancel() {
this.previewVisible = false;
},
handlePreview(file) {
this.previewImage = file.url || file.thumbUrl;
this.previewVisible = true;
},
handleChange({
file, fileList }) {
this.fileList = fileList;
if (file.status == 'done' || file.status == 'removed') {
var values = this.fileList
.filter((x) => x.status == 'done')
.map((x) => x.id || x.response.fileInfo.id);
var newValue = this.maxCount == 1 ? values[0] : values;
this.internelValue = newValue;
this.$emit('input', newValue);
}
},
},
};
</script>