在jeecg中使用a-upload(ant-design-vue组件)出现http:localhost:3000/sys/common/upload错误,页面上传不到指定路径
修改如下:<template><div><a-uploadname="file":multiple="true":action="url.fileUpload":headers="headers"@change="handleChange"...
·
修改如下:
<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>

更多推荐



所有评论(0)