element+vue+springBoot完整版上传图片

最新推荐文章于 2024-09-10 09:35:09 发布

Heart_B

最新推荐文章于 2024-09-10 09:35:09 发布

阅读量1.3k

点赞数

分类专栏： java前后端分离功能文章标签： vue spring boot

本文链接：https://blog.csdn.net/hearth_b/article/details/106720424

版权

本文详细介绍了如何使用Vue.js前端框架与Spring Boot后端结合，实现完整的图片上传功能。首先从Vue组件出发，讲解如何创建上传组件，然后阐述Spring Boot后台如何配置接收并保存上传的图片到本地服务器的实现过程。

摘要由CSDN通过智能技术生成

1、vue.vue

<template>
  <div>
  	<el-form-item label="图片地址" prop="pictureAddress">
        <el-upload
          class="avatar-uploader"
          :action="url"
          :show-file-list="false"
          :on-success="successHandle">
          <img v-if="dataForm.pictureAddress" :src="dataForm.pictureAddress" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
	export default {
   
	  data(){
   
		return {
   
		 url: this.$http.adornUrl(`/active/upload/upImage?token=${
     this.$cookie.get('token')}`),
		 dataForm: {
   
          pictureAddress: ''
        },