目录

1、编写模板

 2、发请求调接口

 3、后端返回数据

1.编写实体类

2.Controller类 

3、interface接口（Service层接口）

 4.Service（接口实现）

5、interface接口（Mapper层接口）

6、xml

4、upload相关参数 

---

 

 说明（该案例是一个el-form和el-upload结合的，逻辑是：需要先保存输入框的内容才能上传图片，分别调用了4（查询，删除、插入，上传图片）个接口）

1、编写模板

<template><div class="container"><el-form ref="form" label-width="100px"><el-form-item label="商品名称："><el-input v-model="name" placeholder="请输入内容"></el-input></el-form-item><el-form-item label="商品价格："><el-input v-model="price" placeholder="请输入内容"></el-input></el-form-item><el-button size="small" type="success" @click="saveGoods">保存</el-button></el-form><el-upload ref="upload"class="upload-demo"action="http://localhost:8080/api/upload/uploadImage":disabled="isButtonDisabled"multipleaccept="images/png"list-type="picture-card"drag:limit="10":data="uploadData":before-upload="beforeUpload":on-progress="uploadProgress":on-success="handleSuccess":on-error="uploadError":on-preview="handlePreview":before-remove="beforeRemove":on-remove="handleRemove":on-exceed="handleExceed":file-list="fileList"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></div>
</template>

 2、发请求调接口

<script>
export default {name: "uploadFile",data() {return {isButtonDisabled: true,name: '',price: '',uploadData: {id: ''},fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },{ name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],dialogImageUrl: '',dialogVisible: false};},mounted() {const id = this.$route.params.id;this.selectById(id);},methods: {selectById(id){this.$axios({method:'post',url:'http://localhost:8080/api/upload/selectGoods',data:{id:id}}).then((res)=>{//往fileList中添加一条数据，因为收的数据是[{}]所以需要获取索引list[0]this.fileList.push( {name: res.data.data.list[0].name, url: res.data.data.list[0].imageUrl})this.name=res.data.data.list[0].namethis.price=res.data.data.list[0].price})},//图片上传成功之后：将上传图片的数据添加到fileListhandleSuccess(response, file, fileList) {// 根据后端返回的数据修改fileList集合const { url, name } = response.data;const uploadedFile = {url,name,status: 'finished',};// 将上传的文件添加到fileList集合中fileList.push(uploadedFile);// 更新fileList，触发重新渲染this.$forceUpdate();},//上传失败的逻辑uploadError(err, file, fileList) {this.$message({message: err.message,type: "error",});},saveGoods() {if (this.name == '') {this.$message({message: "请输入商品名称",type: "error",});return;}if (this.price == '') {this.$message({message: "请输入商品价格",type: "error",});return;}this.$axios({method: 'post',url: "http://localhost:8080/api/upload/saveGoods",data: {name: this.name,price: this.price}}).then((res) => {this.$message({message: "保存成功",type: "success",});console.log("id:" + res.data.data);this.uploadData.id = res.data.data;this.isButtonDisabled = false; // 禁用上传按钮})},//点击上传成功之后的图片进行预览handlePreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},//上传之前调用：校验类型、大小beforeUpload(file) {if (this.uploadData.id == '') {this.$message({message: "请先保存数据，再上传图片",type: "error",});return false;}const fileSize = file.size / Math.pow(2, 20);if (file.type !== 'image/jpg' && file.type !== 'image/png') {this.$message.error('只能上传jpg/png文件')return false;}console.log("fileSieze:" + fileSize);if (fileSize > 2) {this.$message.error("图片不能超过2MB")return false;}return true;},//删除之前的逻辑beforeRemove(file, fileList) {return this.$confirm(`确定要删除图片 ${file.name}吗？`);},//删除的逻辑handleRemove(file, fileList) {if (this.uploadData.id !== '') {//发送请求，删除商品的图片this.$axios({method: "post",url: "http://localhost:8080/api/upload/deleteGoodsImage",data: {id: this.uploadData.id,}}).then((res) => {this.$message({message: "删除成功",type: "success",});})// 根据删除的文件信息修改fileList集合const index = fileList.findIndex(item => item.name === file.name);if (index !== -1) {fileList.splice(index, 1);}// 返回true允许删除，返回false阻止删除return true;}},//文件超出个数限制时的钩子handleExceed(files, fileList) {this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},//上传时，执行的逻辑uploadProgress(event, file, fileList) {}},}
</script>

 3、后端返回数据

1.编写实体类

package com.example.goods_admin.entity;public class Goods extends Page {private String id;private String name;private int price;private String imageUrl;private String status;public Goods() {super();}public Goods(int pageNum, int pageSize, String keyWord) {super(pageNum, pageSize, keyWord);}public Goods(int pageNum, int pageSize, String keyWord, String id, String name, int price, String imageUrl, String status) {super(pageNum, pageSize, keyWord);this.id = id;this.name = name;this.price = price;this.imageUrl = imageUrl;this.status = status;}public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getPrice() {return price;}public void setPrice(int price) {this.price = price;}public String getImageUrl() {return imageUrl;}public void setImageUrl(String imageUrl) {this.imageUrl = imageUrl;}public String getStatus() {return status;}public void setStatus(String status) {this.status = status;}
}

2.Controller类 

@RestController
@RequestMapping("/upload")
public class UploadFileController {@AutowiredUploadFileService uploadFileService;@PostMapping("/uploadImage")public Result uploadImage(@RequestPart MultipartFile[] file,@RequestParam("id") String id) {return uploadFileService.uploadImage(file,id);}@PostMapping("/saveGoods")public Result saveGoods(@RequestBody Goods goods) {return uploadFileService.saveGoods(goods);}@PostMapping("/deleteGoodsImage")public Result deleteGoodsImage(@RequestBody Goods goods) {return uploadFileService.deleteGoodsImage(goods);}@PostMapping("/selectGoods")public Result selectGoods(@RequestBody Goods goods) {return uploadFileService.selectGoods(goods);}}

3、interface接口（Service层接口）

public interface UploadFileService {Result uploadImage(MultipartFile[] imageFile, String id);Result saveGoods(Goods goods);Result deleteGoodsImage(Goods goods);Result selectGoods(Goods goods);
}

 4.Service（接口实现）

@Service
public class UploadFileServiceImpl implements UploadFileService {@AutowiredUploadFileMapper uploadFileMapper;@Overridepublic Result uploadImage(MultipartFile[] imageFile, String id) {//1、吧图片放到指定的文件夹下//2、更新数据try {// 指定目标文件夹路径String folderPath = "D:/imagePath/";// 获取文件名String fileName ="";// 遍历上传的文件数组for (MultipartFile file : imageFile) {// 获取文件名fileName = file.getOriginalFilename();// 构建目标文件路径Path targetPath = Paths.get(folderPath, fileName);// 将文件保存到目标文件夹Files.copy(file.getInputStream(), targetPath, StandardCopyOption.REPLACE_EXISTING);}Goods goods=new Goods();goods.setId(id);goods.setImageUrl(folderPath+fileName);uploadFileMapper.updateGoods(goods);Map<String, Object> resultMap = new HashMap<>();resultMap.put("name",fileName);resultMap.put("url",folderPath+fileName);// 文件保存成功，返回相应信息return Result.succeed("文件保存成功！",resultMap);} catch (Exception e) {e.printStackTrace();// 文件保存失败，返回错误信息return  Result.failed ("文件保存失败！",new HashMap<String,Object>());}}@Overridepublic Result saveGoods(Goods goods) {goods.setStatus("1");String id = UUID.randomUUID().toString();goods.setId(id);int count=uploadFileMapper.saveGoods(goods);if (count==1){return Result.succeed("保存成功",id);}else{return Result.failed("保存失败",id);}}@Overridepublic Result deleteGoodsImage(Goods goods) {goods.setImageUrl("");int count=uploadFileMapper.updateGoods(goods);if (count==1){return Result.succeed("删除成功");}else{return Result.failed("删除失败");}}@Overridepublic Result selectGoods(Goods goods) {int pageNum = goods.getPageNum()==0?1:goods.getPageNum();int pageSize = goods.getPageSize()==0?10:goods.getPageSize();//1、开启分页查询PageHelper.startPage(pageNum,pageSize);//2、查询结果List<Goods> goodsList  = uploadFileMapper.selectGoods(goods);//3、封装结果PageInfo<Goods> goodsPageInfo = new PageInfo<>(goodsList);//4、返回return Result.succeed("查询成功",goodsPageInfo);}}

5、interface接口（Mapper层接口）

public interface UploadFileMapper {int saveGoods(Goods goods);int updateGoods(Goods goods);int deleteGoodsImage(Goods goods);List<Goods> selectGoods(Goods goods);
}

6、xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.goods_admin.mapper.UploadFileMapper"><resultMap id="BaseResultMap" type="com.example.goods_admin.entity.Goods"><id column="id" jdbcType="VARCHAR" property="id" /><result column="name" jdbcType="VARCHAR" property="name" /><result column="price" jdbcType="INTEGER" property="price" /><result column="imageUrl" jdbcType="VARCHAR" property="imageUrl" /><result column="status" jdbcType="VARCHAR" property="status" /></resultMap><insert id="saveGoods">INSERT INTO goods (<if test="id != null and id != ''">id</if><if test="name != null and name != ''">,name</if><if test="price != null and price != ''">,price</if><if test="imageUrl != null and imageUrl != ''">,imageUrl</if><if test="status != null and status != ''">,status</if>) VALUES (<if test="id != null and id != ''">#{id}</if><if test="name != null and name != ''">,#{name}</if><if test="price != null and price != ''">,#{price}</if><if test="imageUrl != null and imageUrl != ''">,#{imageUrl}</if><if test="status != null and status != ''">,#{status}</if>)</insert><delete id="deleteGoodsImage">delete from user<where><if test="id!='' and id!=null">id = #{id}</if></where></delete><select id="selectGoods" resultType="com.example.goods_admin.entity.Goods">select * from goods<where><if test="keyWord !=null and keyWord!=''">name like concat('%', #{keyWord}, '%')</if><if test="id !=null and id!=''">and id =#{id}</if></where></select><update id="updateGoods">update goods<set><if test="name!=''and name!=null">name=#{name},</if><if test="price!=''and price!=null">price=#{price},</if><if test="imageUrl!=null">imageUrl=#{imageUrl},</if><if test="status!=''and status!=null">status=#{status}</if></set>whereid = #{id}</update></mapper>

4、upload相关参数