<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 =》》》》
![](/i/l/?n=22&i=blog/2461462/202209/2461462-20220921094644637-221725204.png)
) 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,return,上传,fileList,data,file,reader,组件,type From: https://www.cnblogs.com/book-student/p/16714566.html