You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.5 KiB
71 lines
1.5 KiB
<template>
|
|
<div>
|
|
<a-upload
|
|
:action="`${$upload}`"
|
|
accept='.jpg,.JPG,.png,.PNG,.jpeg,.JPEG'
|
|
list-type="picture-card"
|
|
:headers="uploadHeaders"
|
|
:file-list="fileList"
|
|
@preview="handlePreview"
|
|
@change="handleChange"
|
|
>
|
|
<div v-if="fileList.length < limit">
|
|
<a-icon type="plus" />
|
|
<div class="ant-upload-text">上传图片</div>
|
|
</div>
|
|
</a-upload>
|
|
<imgModal :previewVisible='previewVisible' :previewImage='previewImage' @handleCancel='handleCancel'/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import imgModal from "./imgModal.vue"
|
|
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);
|
|
});
|
|
}
|
|
import store from "@/store";
|
|
export default {
|
|
components:{
|
|
imgModal
|
|
},
|
|
props:{
|
|
fileList:Array,
|
|
limit:{
|
|
type:Number,
|
|
default:1
|
|
}
|
|
},
|
|
data() {
|
|
return{
|
|
previewVisible: false,
|
|
previewImage: '',
|
|
uploadHeaders: {
|
|
"manage-login-token": store.getters.getToken
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
async handlePreview(file) {
|
|
if (!file.url && !file.preview) {
|
|
file.preview = await getBase64(file.originFileObj);
|
|
}
|
|
this.previewImage = file.url || file.preview;
|
|
this.previewVisible = true;
|
|
},
|
|
handleCancel(){
|
|
this.previewVisible = false;
|
|
},
|
|
handleChange({ fileList }) {
|
|
this.$emit('handleChange',fileList)
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |