jeecgboot上传文件到服务器,jeecg-boot+ant design pro：图片上传（upload）

业务描述：多图片上传

准备工作：图片上传接口、图片预览接口、图片存储接口

url: {

fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",//图片上传接口，jeecg自带

imgerver: window._CONFIG['domianURL']+"/sys/common/view",//图片预览接口，jeecg自带

add: "/Bshopbusniess/fileUpload/add",//存图接口，自己代码生成

},

效果：

代码：(整个vue页面的全部代码，不做代码注释了)

v-model='catalog'

v-decorator="['catalog',{ rules: [{ required: true, message: 'Please select your 一级类目!' }] },]"

placeholder="Please select your 一级类目!"

>

上衣

裤子

马甲

v-model='catalogchild'

v-decorator="['catalogchild',{ rules: [{ required: true, message: 'Please select your 二级类目!' }] },]"

placeholder="Please select your 二级类目!"

>

内衬

肩部

手肘

:action="uploadAction"

:multiple="true"

listType="picture-card"

:fileList="fileList"

:headers="headers"

:beforeUpload="beforeUpload"

@preview="handlePreview"

@change="handleChange"

>

Upload

提交

// 用于http请求

import { httpAction, getAction } from '@/api/manage'

// 获取用户token

import Vue from 'vue'

import { ACCESS_TOKEN } from "@/store/mutation-types"

export default {

data() {

return {

formLayout: 'horizontal',

form: this.$form.createForm(this, { name: 'coordinated' }),

url: {

fileUpload: window._CONFIG['domianURL']+"/sys/common/upload",//图片上传接口，jeecg自带

imgerver: window._CONFIG['domianURL']+"/sys/common/view",//图片预览接口，jeecg自带

add: "/Bshopbusniess/fileUpload/add",//存图接口，自己代码生成

},

headers: {

authorization: 'authorization-text',

},

previewVisible: false,

previewImage: '',

fileList: [

// {

// uid: '-1',

// name: 'xxx.png',

// status: 'done',

// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',

// },

],

catalog:'',

catalogchild:'',

};

},

created(){

const token = Vue.ls.get(ACCESS_TOKEN);

this.headers = {"X-Access-Token":token}

},

computed:{

uploadAction:function () {

// 上传接口

return this.url.fileUpload;

}

},

methods: {

beforeUpload: function(file){

var fileType = file.type;

if(fileType.indexOf('image')<0){

this.$message.warning('请上传图片');

return false;

}

},

handleCancel() {

this.previewVisible = false;

},

handlePreview(file) {

this.previewImage = file.url || file.thumbUrl;

this.previewVisible = true;

},

handleChange({ fileList }) {

this.fileList = fileList;

},

submit(){

// alert(this.fileList.length)

// console.log(this.fileList)

for (var i = 0; i

var fileUrl = this.url.imgerver+"/"+this.fileList[i].response.message

var fileName = this.fileList[i].name

var cataLog = this.cataLog

// 将图片信息存入数据库

let httpurl = '';

let method = '';

httpurl+=this.url.add;

method = 'post';

//json对象

const url = {url: fileUrl};

const filename = {filename: fileName};

const catalog = {catalog:this.catalog};

const catalogchild = {catalogchild:this.catalogchild};

let formData = Object.assign(url,filename,catalog,catalogchild);

// alert(JSON.stringify(formData))

httpAction(httpurl,formData,method).then((res)=>{

//判断是否提交成功

if(res.success==true) {

//提交成功后，刷新浏览器

window.location.reload()

}

console.log(res);

})

}

},

},

};

/* you can make up upload button and sample style by using stylesheets */

.ant-upload-select-picture-card i {

font-size: 32px;

color: #999;

}

.ant-upload-select-picture-card .ant-upload-text {

margin-top: 8px;

color: #666;

}

.test{

margin-left: 235px;

display:block;

width:600px;

}

.button{

display:block;

margin-top:20px;

}

标签：fileUpload,pro,boot,upload,接口,window,上传,jeecg

来源： https://blog.csdn.net/qq_34514388/article/details/104795318