vue往后台传图片，后台按日期保存的方法

最新推荐文章于 2024-05-08 22:07:44 发布

原创

最新推荐文章于 2024-05-08 22:07:44 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #java

本文介绍如何使用Vue.js结合element-ui或ant design vue的上传组件将图片发送到后台。关键在于设置upload组件的action属性指向接口地址。在后台，采用Java编写接口，并利用工具类进行日期格式化的文件保存。当图片上传成功后，前端可以通过change事件获取到file信息。建议在实际项目中对接口地址进行封装，以便于管理和维护。

引用element ui或者ant design vue的上传组件

<template>
  <div>
    <a-upload
      :action="this.$store.state.imgBaseUrl + '/upload/carousel/picture'"
      list-type="picture"
      class="upload-list-inline"
      @change="btn_click"
    >
      <a-button> <a-icon type="upload" /> upload </a-button>
    </a-upload>
  </div>
</template>
<script>
export default {
     
     
  data() {
     
     
    return {
     
     };
  },
  methods: {
     
     
    btn_click(file) {
     
     
      console.log(file);
      //  console.log(file.file.response.data.path)
      console.log(file.file);
      console.log(file.file.name);
      console.log(file.file.response);
      console.log(file.file.response.code);
     if(file.file.response.code==200){
     
     
       alert("上传成功")
     }
    },
  },
};
</script>

这里的重点是action里绑定的接口地址，这里只是测试，所以我只是把localhost 前一部分放到了共享状态中，写项目最好是封装一下，不然该了接口地址，前端改起来就很麻烦。

后端代码编写，因为阿里巴巴代码规范里有强调方法中的代码不要超过80行，所以我封装了一个工具类

package com.yjx.util;

import com.yjx.controller.MedicineController;
import lombok.extern.slf4j.Slf4j;
import org.springframework

最低0.47元/天解锁文章