springboot+vue+elementui 前后端分离 上传图片和文字说明或其他参数（表单）到阿里oss 前后端代码详解，全代码分享！

一、前端

   前端使用的是vue+elementui;

1. data中定义 (根据页面规划来)

    upLoadVisible: false,
    uploadForm: {
             //主标题
             title: '',
             //banner类型： 1：首页banner  2 :首页上划推广
             type: '',
             //适用业务类型
             businessType: '',
             //副标题内容
             content: '',
             //显示条件- 条件id数组
             conditions: '',
             //排序
             sort: '',
             //客户端类型  1 乘客端   2 司机端
             clientType: '',
           },

    

2. 弹出框

    <el-button @click="uploadBanner" type="primary" style="margin-left: 20px;">上传banner<i
                   class="el-icon-upload el-icon--right"></i></el-button>
        </el-col>
   
   
     <!-- 上传图片弹出框 -->
       <!--:rules="rules" 设置验证规则了，必须要给相应的标签上加入 prop="" ，否则不起作用-->
       <el-dialog :visible.sync="upLoadVisible" title="上传banner" width="40%">
         <el-form v-model="uploadForm"  ref="uploadForm" label-width="120px" :rules="rules">
           <el-form-item label="主标题:" prop="title">
             <el-input placeholder="主标题" v-model="uploadForm.title" style="width: 194px;"></el-input>
           </el-form-item>
           <el-form-item label="副标题内容:" prop="content">
             <el-input placeholder="副标题内容" v-model="uploadForm.content" style="width: 194px;" type="textarea"></el-input>
           </el-form-item>
   
           <el-form-item label="排序:" prop="sort">
             <el-input placeholder="排序" v-model="uploadForm.sort" style="width: 194px;"></el-input>
           </el-form-item>
         </el-form>
         <el-upload
           ref="upload"
           drag
           action="fakeaction"
           :limit=1
           :multiple="false"
           :on-success="upFile"
           :http-request="uploadFile"
         >
           <i class="el-icon-upload"></i>
           <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
           <div class="el-upload__tip" slot="tip">只能上传图片文件，且只能上传一张</div>
         </el-upload>
   
       </el-dialog>

    

3. js

   methods:{
   
    /**
          * 点击打开上传图片页面
          */
         uploadBanner () {
           this.upLoadVisible = true
         },
   
   
   
        //自定义上传文件
         //http-request	覆盖默认的上传行为，可以自定义上传的实现	function
         uploadFile(file){
           //console.log(111)
           // 根据后台需求数据格式
           const  form=new FormData();
           // 文件对象
           form.append("file", file.file);
           // 要在请求时添加特定属性（其他参数），所以要用自己方法覆盖默认的action
           form.append("hld", JSON.stringify(this.uploadForm));
           this.$postMultipart(this.uploadUrl,form).then((result)=>{
             if(result.data.code===0){
               this.$message.success("图片上传成功");
               this.upLoadVisible=false;
               this.getData(this.pageNum,this.pageSize)
             } else {
               this.$message.warning(result.data.msg);
             }
             //上传完成后，清空缓存
             this.$refs.upload.clearFiles();
             this.$refs.uploadForm.resetFields();
   
           }).catch((error)=>{
             console.log("上传失败 file：",file);
             //即使失败，也会清除上传的图片，因为只有上传图片的动作发生时，他才会调用上传接口
             this.$refs.upload.clearFiles();
             this.$message.warning(error.message);
           })
   
         },
   
   }

    

二、后端 

    @PostMapping("addPicture")
    public Result addPicture(String hld, MultipartFile file) throws Exception {
        logger.info("上传文件 hld:{} ", hld);
        if (file == null || hld == null) {
            return ResultUtil.fail(ExceptionCodeEnum.PARAMS_IS_NULL);
        }
        HomeLinkLocalDto homeLinkLocalDto = JSONObject.parseObject(hld, HomeLinkLocalDto.class);
        if (homeLinkLocalDto==null){
            return ResultUtil.fail(ExceptionCodeEnum.PARAMS_IS_NULL);
        }
        if (ObjectUtils.isFieldNull(homeLinkLocalDto)){
            logger.info("对象中有字段值为空 HomeLinkLocalDto:{}",homeLinkLocalDto);
            return ResultUtil.fail(ExceptionCodeEnum.PARAMS_IS_NULL);
        }
        //获取文件名称
        String fileName = file.getOriginalFilename();
        if (StringUtils.isNotBlank(fileName)) {
            //获取文件后缀
            String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
            String[] arr = {"BMP", "PCX", "PNG", "JPEG", "GIF", "TIFF", "DXF", "CGM", "CDR", "WMF", "EPS", "EMF", "PICT"};
            //如果前端传递过来的文件格式在 图片格式数组中
            boolean contains = Arrays.asList(arr).contains(suffix.toUpperCase());
            if (!contains) {
                logger.info("上传的文件非图片,文件后缀为：suffix:{}", suffix);
                return ResultUtil.fail(ExceptionCodeEnum.ONLY_JPG);
            }

            try {
                File newFile = new File(fileName.trim());

                //保存到本地(如果不保存到本地，直接上传Oss，后面会报路径异常)
                FileOutputStream os = new FileOutputStream(newFile);
                os.write(file.getBytes());
                os.close();
                //transferto()方法 把内存中图片写入磁盘
                file.transferTo(newFile);


                // 上传到OSS
                String ossUrl = aliyunOssUtil.upload(newFile, "banner");
                if (StringUtils.isBlank(ossUrl)) {
                    logger.info("阿里云上传失败");
                    return ResultUtil.fail(ExceptionCodeEnum.OSS_UPLOAD_FAIL);
                }
              
            } catch (Exception e) {
                logger.info("上传文件异常：{}", e);
            }

        }
        return ResultUtil.fail(ExceptionCodeEnum.PARAMS_IS_NULL);

    }

这只是我最近碰到的，有问题随时交流！