ElementUi+Vue+SpringCloud+Forest上传前后端联调

本文介绍: 实现后台上传图片本次使用 vue3加elementUI的upload 组件实现功能一.上传后直接调用后端通用上传工具，在文件服务中调回来用Url存到数据库中。二.通过将上传的信息以FormDa t a的形式传入，并且在后端通过Mul ti partFile形式取出后丢入底层进行解析下面先解析普通上传的方式：方式二：使用自动上传:http–request=“Up loadIm a ge”后端只需要通过简单的Multi partFile file 去接收前端传来的参数并且传入底层接口，后续返回给一个URL就已经完成该任务（底层

实现后台上传图片
本次使用 vue3加elementUI的upload 组件实现功能

一.上传后直接调用后端通用上传工具，在文件服务中调回来用Url存到数据库中。

二.通过将上传的信息以FormDa t a的形式传入，并且在后端通过Multi partFile形式取出后丢入底层进行解析

下面先解析普通上传的方式：

方式二：使用自动上传:http–request=“Up lo adIm a ge”

后端只需要通过简单的MultipartFile file 去接收前端传来的参数并且传入底层接口，后续返回给一个URL就已经完成该任务

<el-upload
  :file-list="filelist"
  class="upload-demo"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-change="handleChange"
  :before-remove="beforeRemove"
  :before-upload="handleBeforeUpload"
  :limit="1"
  :on-exceed="handleExceed"
  :auto-upload="false"
>
  <el-button type="primary">上传</el-button>
  <template #tip>
    <div class="el-upload__tip">
      请上传大小不超过<span style="color: #f56c6c">{{ fileSize }}MB</span>   格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>的文件
    </div>
  </template>
</el-upload>

// 上传前校检格式和大小
const handleBeforeUpload =(file)=> {
      // 校检文件类型
       // 校检文件类型
     if (fileType) {
        let fileExtension = "";
        if (file.name.lastIndexOf(".") > -1) {
          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
        }
        const isTypeOk = fileType.some((type) => {
          if (file.raw.type.indexOf(type) > -1) return true;
          if (fileExtension &amp;&amp; fileExtension.indexOf(type) > -1) return true;
          return false;
        });
        if (!isTypeOk) {
          proxy.$message.error(
            `文件格式不正确, 请上传${fileType.join("/")}格式文件!`
          );
          return false;
        }
      }
      // 校检文件大小
      if (fileSize) {
        const isLt = file.size / 1024 / 1024 < fileSize;
        if (!isLt) {
          proxy.$message.error(`上传文件大小不能超过 ${fileSize} MB!`);
          return false;
        }
      }
      return true;
}    
// 文件个数超出
const handleExceed =()=>  {
       proxy.$message.error(`上传文件数量不能超过1个!`);
}
const handleChange = (file, fileList) =>{
      console.log(file)
      const result=handleBeforeUpload(file)
      console.log(result)
      if(result){
      fileList.value=[]
    fileList.value.push(file);
      form["file"] = file.raw;
      }
}

/**提交 */
const submit = () => {
   formRef.value.validate(valid => {
      if (valid) {
         form.abilityName = dynamicTags.value.join(",");
         form.operatorType = form.operatorType.toString()
         if(form.id){
            API_POST_editOperator(form).then(response => {
              props.user.operatorFlag=1
              getOperatorInfo()
              ElMessage.success("修改成功");
            });
         }else{
            form.userId=props.user.userId;
            API_POST_addOperator(form).then(response => {
              getOperatorInfo()
              ElMessage.success("添加成功");
            });
         }
      }
   });
}

export function API_POST_editOperator (data) {
   return request({
      url: `/uav/operator/edit`,
      method: 'post',
      headers: {
            'Content-Type': 'multipart/form-data'
        },
      data: data
   })
}

@PostMapping("/edit")
public R edit(UavOperatorVo uavOperator)
{
    return uavOperatorService.updateUavOperator(uavOperator);
}

@TableField(exist = false)
private MultipartFile file;

public R updateUavOperator(UavOperatorVo uavOperator) {
    MultipartFile multipartFile = null;
    if(uavOperator.getFile()!=null){
        multipartFile=uavOperator.getFile();
    }
    uavOperator.setFile(null);
    return uavOperatorClient.updateUavOperator(uavOperator,multipartFile);
}

@Post(url = "/operator/edit",contentType = "multipart/form-data")
R updateUavOperator(@Body UavOperatorVo uavOperator, @DataFile(value = "file") MultipartFile multipartFile);