vue和java图片上传

folyh

已于 2023-04-08 10:06:50 修改

阅读量1.3k

点赞数

分类专栏：后端Java 前端Vue-ElementUI 文章标签： vue.js java 前端

于 2022-05-07 16:35:02 首次发布

本文链接：https://blog.csdn.net/qq_45738250/article/details/124630812

版权

本文介绍了如何使用Vue.js前端框架与Java后端配合实现图片上传功能，详细阐述了图片上传的流程、前端表单提交及上传方法，后端控制器、上传接口的设计，以及利用七牛云进行图片存储，并探讨了图片的递归压缩技术。同时，还讨论了图片的Base64格式转换工具类，包括图片转byte[]字符串和Base64编码，以及Base64编码字符串转回图片地址的方法。

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

文章目录

前言
一、图片上传
二、其他工具类
- 1.图片base64格式相互转换
- - 1.1 将图片转为byte[]字符串并用base64编码
  - 1.2 将base64编码字符串转为图片地址

前言

一、图片上传

1、流程及图

在这里插入图片描述

2、前端：

2.1 表单提交

	                <!-- 企业简称 -->
                <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px">
                    <el-form :model="editEntity" ref="editEntity"
                             label-width="80px"  class="demo-ruleForm" >
                        <el-row>
                            <el-col :span="2">
                                &nbsp;
                            </el-col>
                            <el-col :span="12">
                                &nbsp;&nbsp;&nbsp;
                            <el-button type="danger" disabled>{
   {
   editEntity.compayName}}</el-button>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="企业名称" prop="name">
                                    <el-input type="text" placeholder="请输入企业名称，最多输入十个字"
                                              v-model="editEntity.name"></el-input>
                                </el-form-item>
                            </el-col>
                         
                            <el-col :span="12">
                                <el-form-item label="A类单位" prop="invoiceCompanyidA">
                                    <el-select size="mini" v-model="editEntity.invoiceCompanyidA" >
                                        <el-option v-for="invoiceCompanyItem in invoiceCompanyOptionsA" :key="invoiceCompanyItem.id"
                                                   :label="invoiceCompanyItem.name" :value="invoiceCompanyItem.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                          
                            <el-col :span="12">
                                <el-form-item label="A类公章" prop="taxImageUrl">
                                    <el-upload class="avatar-uploader" :action="uploadImageUrl"
                                               :multiple="false" accept="image/*" :limit="1024" :auto-upload="true"
                                               :show-file-list="false" :on-success="handleUploadSuccess1">
                                        <img v-if="editEntity.taxImageUrl"
                                             :src="editEntity.taxImageUrl" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>