功能包含

一、上传图片，保存后台本地

二、清空图片，后台跟随删除

成功示范

前端实现

vue代码

<el-form-item label="门店logo">
  <el-upload action="#" list-type="picture-card" :auto-upload="false"
             ref="dataUpload"
             limit="1"
             :file-list="file_list"
             :on-change="handleLogoChange"
             :on-remove="handleLogoRemove"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>
</el-form-item>
<el-form-item label="">
  <el-button type="success" @click="submitUpload">下发门店信息</el-button>
</el-form-item>

js代码

let file_list = ref([])
/**
 * 门店logo change事件
 */
async function handleLogoChange(file, fileList) {
  console.info("门店logo change事件")
  if(file && file_list.value.length == 0){
    file_list.value.push(file)
  }

  setTimeout(() => {
    if (file_list.value.length > 0 || fileList.length > 0) {
      document.getElementsByClassName('el-upload')[0].style.display = 'none'
    }
  }, 100);
}

/**
 * 门店logo移除事件
 */
async function handleLogoRemove(file, fileList) {
  console.info("门店logo移除事件")
  file_list.value = []
  setTimeout(() => {
    document.getElementsByClassName('el-upload')[0].style.display = ''
  }, 100);
}


function submitUpload(){
  // instance.refs.dataUpload.submit()
  const formData = new FormData();
  // 构造formData数据
  formData.append('file',file_list.value.length==0?null:file_list.value[0].raw)
  formData.append('shopTxt', shopTxt.value)
  formData.append('deviceNo', deviceNo)
  uploadShopLogo(formData).then(res=>{
    proxy.$modal.msgSuccess("操作成功");
  })
}

css代码

<style scoped>
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }

  .styleA .el-upload--picture-card{
    width:110px;
    height:110px;
    line-height:110px;
  }
  .styleB .el-upload--picture-card{
    display:none;
  }
</style>

后端实现

控制层

/**
 * 门店抬头logo下发
 */
@RequiresPermissions("iot:access:shopLogo")
@PostMapping("/shopLogo")
public AjaxResult shopLogo(String deviceNo,String shopTxt, @RequestParam(value = "file",required=false) MultipartFile files){
    accessService.shopLogo(deviceNo,shopTxt,files);
    return AjaxResult.success();
}

业务层

filesService 是 服务器域名或者ip:端口号

@Value("${files.service}")
private String filesService;


public void shopLogo(String deviceNo, String shopTxt, MultipartFile file) {
    try {
        //相对路径
        String relativePath = "";
        //获取项目路径,同级目录作为文件目录
        String projectFile = new File(System.getProperty("user.dir")).getParent();
        String filePath = projectFile+"/files/device/";
        //获取图片名称
        String path = filePath + deviceNo + "_shopLogo.jpg";
        if(file != null){
            //添加文件
            File fileDir = new File(filePath);
            if(!fileDir.exists()) {
                //如果没有目录应该创建目录
                fileDir.mkdirs();
            }
            //文件实现上传
            file.transferTo(new File(path));
            relativePath = "http://"+filesService+"/device/"+deviceNo + "_shopLogo.jpg";
        }else {
            //删除文件
            File fileDir = new File(path);
            if(fileDir.exists()){
                fileDir.delete();
            }
        }

} catch (Exception e) {
    log.error(e.getMessage(), e);
}