文件上传

1. 引入依赖

   <!--文件上传-->
           <dependency>
               <groupId>commons-fileupload</groupId>
               <artifactId>commons-fileupload</artifactId>
               <version>1.4</version>
           </dependency>
   

2. 接收上传的文件

       /**
        * 图片上传
        */
       @PostMapping("/uploadImg")
       public R uploadImg(@RequestParam("file") MultipartFile file){
           Integer s = goodsImgsService.uploadImg(file);
           System.out.println(s);
           return R.success(s);
       }
   

3. 编写工具类

   import org.springframework.stereotype.Component;
   import org.springframework.util.ResourceUtils;
   import org.springframework.web.multipart.MultipartFile;
   
   import java.io.File;
   import java.util.UUID;
   
   /**
    * @Author Sni
    * @Date 2023/2/16 21:34
    * @Version 1.0
    */
   @Component
   public class MyUploadFile {
   
       /**
        * 上传文件
        *
        * @param multipartFile 文件对象
        * @return
        */
       public String uploadFile(MultipartFile multipartFile) {
           try {
               // 获取上传文件的名称
               String originalFilename = multipartFile.getOriginalFilename();
               // 文件名后缀
               String fileSuffix = originalFilename.substring(originalFilename.lastIndexOf("."));
               // 利用UUID生成文件名
               String uuid = String.valueOf(UUID.randomUUID());
               // 获取指定的路径-在target\classes\static\upload\img\goods
               String basePath = ResourceUtils.getURL("classpath:").getPath() + "static/upload/img/goods/";
               // 新的文件名，使用UUID生成文件名，防止后期重名
               String fileName = uuid + fileSuffix;
               // 创建新的文件
               File fileExist = new File(basePath);
               // 文件夹不存在，则新建
               if (!fileExist.exists()) {
                   fileExist.mkdirs();
               }
               // 获取文件对象
               File file = new File(basePath, fileName);
               // 完成文件的上传
               multipartFile.transferTo(file);
               // 返回路径
               return "/upload/img/goods/"+fileName;
           } catch (Exception e) {
               e.printStackTrace();
           }
           return "error";
       }
   
   
   }
   
   

   前端代码（Vue+ElementUI）

    <el-form-item label="样图上传">
        <el-upload
               ref="upload"
               :action="BASE_API+'/goods-imgs/uploadImg'" 
               list-type="picture-card"
               :on-success="handleAvatarSuccess"
               >
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
   </el-form-item>
   <!-- 获取响应数据 -->
   <script>
   
       export default {
           data(){
               return{
                   BASE_API:process.env.BASE_API,//IP地址+端口号
               }
           },
           methods: {
               handleAvatarSuccess(response,file,fileList){
                   this.form.goodsImgsId = response.data
                   console.log(response);//获取上传文件后响应到的数据
         		}
           }
       }
   
   </script>