axios文件数据一起返回后端并解决跨域问题

服务端地址在8081 vue在8080 用的ElementUI组件

给axios写一个封装

//request.js
import axios from "axios";
import qs from "qs";
import Element from 'element-ui'
import store from '@/store/store.js'

// import app from "../main.js";
/****** 创建axios实例 ******/
const service = axios.create({
    baseURL: 'http://127.0.0.1:8081',  // api的base_url
    timeout: 5000  // 请求超时时间
});
/****** request拦截器==>对请求参数做处理 ******/
service.interceptors.request.use(config => {
    // Element.Message({
    //     message: '数据加载中……',
    //     center: true
    // });

    if (config.method === 'post') {
        if (config.data instanceof FormData) {
            //文件类 不需要Stringfy
            config.headers['Content-Type'] = 'multipart/form-data';
        } else {
            config.data = qs.stringify({ ...config.data })
            config.headers['Content-Type'] = 'application/x-www-form-urlencoded';

        }
    } else {
        config.params = { ...config.params };
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    }
    config.headers['Access-Control-Allow-Origin'] = '*';
    config.headers['Access-Control-Allow-Headers'] = 'content-type';
    config.headers['userToken'] = localStorage.getItem('userToken');
    config.headers['adminToken'] = localStorage.getItem('adminToken');
    return config;
}, error => {  //请求错误处理
    Element.Message({
        message: error.message.includes(''),
        type: 'warning'
    });

    // app.$vux.toast.show({
    //     type: 'warn',
    //     text: error
    // });
    Promise.reject(error)
});
/****** respone拦截器==>对响应做处理 ******/
service.interceptors.response.use(
    response => {
        if (store.state.Reminders == 0) {
            if (response.data.code == 700) {
                Element.Message({
                    message: '你当前还没有登录哦~记得登录呀',
                    type: 'info'
                });
                store.commit("remove_info");
                store.commit("RemindersIncre");
                return;
            }
        }
        return response.data;
    },
    error => {  //响应错误处理
        let text = JSON.parse(JSON.stringify(error)).message
        Element.Message.error({
            message: text
        });
        return Promise.reject(error)
    }
);
export default service;

给headers添加Access-Control-Allow-Origin

上传文件把headers设置成config.headers[‘Content-Type’] = ‘multipart/form-data’;

数据处理

vue页面，一个表单里加一个图片上传

<template>
  <el-card>
    <div class="box">
      <!--商品信息-->
      <div class="info">
        <div class="form">
          <el-form :model="editForm" :rules="rules" ref="editForm">
            <el-form-item label="商品名称" prop="goodsName">
              <el-input
                v-model="editForm.goodsName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品描述" prop="goodsDescri">
              <el-input
                v-model="editForm.goodsDescri"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goodsPrice">
              <el-input
                v-model="editForm.goodsPrice"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品图片(1张)">
              <el-upload
                action="string"
                :http-request="upload"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :limit="1"
                ref="upload"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="商品详细图"> </el-form-item>
            <el-button class="confirm" @click="submitEditDialog('editForm')"
              >确 定</el-button
            >
          </el-form>
        </div>
      </div>
    </div>
  </el-card>
</template>

upload 上传用:http-request=“upload”

data处理，在data（）中设置一个变量pro去保存将上传的变量,upload方法就是做一个变量转换

<script>
	data(){
		return{
			pro:{},
		}
	},
	methods:{
		upload(item) {
     		 	this.pro = item;
    		},
                
	}
</script>

我是在确定按钮中一起提交数据,但是需要创建一个FormData 把图片 和 表单数据添加到formData中，以post提交

	const data = new FormData();
          data.append("file", this.pro.file);
          data.append("info", JSON.stringify(this.editForm));
          let res = await addGoods(data);

封装api中的方法

//添加新商品
export const addGoods = (data) => {
    return service({
        url: '/admin/addGoods',
        method: 'post',
        data
    })
}

JAVA代码

这部分就很简单了,用一个multipartFile 和String 接收

因为我把前端的表单数据变成了JSON所以需要转换一下

@PostMapping("/addGoods")
    @ResponseBody
    @ApiOperation("新增商品信息")
    public ResponseUtil addGoods(@RequestParam("file") MultipartFile file,
                                 @RequestParam("info") String string) {
        String URL = "";
        try {
            URL = oosUtil.checkImage(file);
        } catch (Exception e) {
            e.printStackTrace();
        }
        GoodsVo goodsVo = JSONObject.parseObject(string, GoodsVo.class);
        goodsVo.setGoodsId(UUIDUtils.getUUIDInOrderId());
        goodsVo.setGoodsPic(URL);
        return goodsService.addGoods(goodsVo) ? ResponseUtil.SUCCCESS("添加商品成功") : ResponseUtil.ERROR("添加商品失败,请稍后再试");
    }

Controller注意添加CrossOrign

我写的比较简单，主要是为了实现功能。