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

项目场景：

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

表单中的参数，需要通过上传来完成，一般有二种情况在上传

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

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

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

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

技术代码

方式一：使用action自动上传（不推荐）

    <el–upload
              :action=”uploadFileUrl“
              ref=”upload“
              list–type=”picture–card“
              :on–preview=”handlePictureCardPreview“
              :on–remove=”handleRemove”
              :before–upload=”beforeAvatarUpload“
              :limit=”10″
              :headers=”headers“
              :on–exceed=”handleExceed“
              :file-list=”formData.fileList“
           
            >
              <i class=”el–icon–plus“&gt;</i&gt;
            </el–upload&gt;
 

 方式二：使用自动上传:http–request=“UploadImage”

 <el–upload
              action=”#”
              ref=”upload“
              :http–request=”UploadImage”
              list–type=”picture–card“
              :on–preview=”handlePictureCardPreview“
              :on–remove=”handleRemove”
              :before–upload=”beforeAvatarUpload“
              :limit=”10″
              :headers=”headers“
              :on-exceed=”handleExceed“
              :file-list=”formData.fileList“
           
            &gt;
              <i class=”el–icon–plus“&gt;</i>
            </el–upload>

    UploadImage(param) {
      const formData = new FormData();
      formData.append(“file”, param.file);
      //调用后端上传API

      upoloadFile(formData) .then((response) => {

         //将后端返回的URL作为展示图层

            form.orgLogo = response.data.paseUrl

}
},

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

（底层接口将文件存储到阿里云等云服务上，通过设置bucketName等属性，将文件存储起来后返回一个URL给前端即可完成）

2.通过将上传的信息以FormData的形式传入，并且在后端通过MultipartFile形式取出后丢入底层进行解析

<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>

通过:before-upload=”handleBeforeUpload”和  :on–change=”handleChange”来完成对于FormData信息的存储

// 上传前校检格式和大小
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 && 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;
      }
}

 以这种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
   })
}

 在headers加上Content-Type的形式发送到后端服务器中

@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);

 这里通过在ServiceImpl中取出从前端存的FormData的信息，最后在调用底层通过加上contentType 和 @DataFile 调用到底层存储服务器

代码007普通

打赏 收藏 海报 链接