修改如下: <template> <div> <a-upload name="file" :multiple="true" :action="url.fileUpload" :headers="headers" @change="handleChange" > <a-button> <a-icon type="upload" /> 点击上传 </a-button> </a-upload> <div class="clearfix"> <a-upload :action="url.fileUpload" listType="picture-card" :fileList="fileList" :headers="headers" @preview="handlePreview2" @change="handleChange2" > <div v-if="fileList.length < 3"> <a-icon type="plus" /> <div class="ant-upload-text">Upload</div> </div> </a-upload> <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"> <img alt="example" style="width: 100%" :src="previewImage" /> </a-modal> </div> </div> </template> <script> import { httpAction } from '@/api/manage' import Vue from 'vue' import { ACCESS_TOKEN } from '@/store/mutation-types' export default { data() { return { headers: { authorization: 'authorization-text' }, url: { fileUpload: window._CONFIG['domianURL']+"/sys/common/upload" }, previewVisible: false, previewImage: '', fileList: [ { uid: '-1', name: 'xxx.png', status: 'done', url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }, ], }; }, created (){ const token = Vue.ls.get(ACCESS_TOKEN); this.headers = {"X-Access-Token":token} }, methods: { handleChange(info) { // 上传文件 if (info.file.status !== 'uploading') { console.log(info.file, info.fileList); } if (info.file.status === 'done') { this.$message.success(`${info.file.name} 上传成功`); } else if (info.file.status === 'error') { this.$message.error(`${info.file.name} 上传失败.`); } }, handleCancel(){ this.previewVisible = false }, handlePreview2(file){ this.previewImage = file.url || file.thumbUrl this.previewVisible = true }, handleChange2({ fileList }){ this.fileList = fileList } }, }; </script> <style scoped> </style>