VUE+element-ui文件上传

文章目录

• • 图片上传+显示（ImageCropper）
  • 图片上传（el-upload）+显示（img）
  • 文件上传（el-upload）
  • 注意

图片上传+显示（ImageCropper）

此前端代码自己封装了自动文件上传，只需要配置后端接口需求URL以及对应的图片上传成功后的处理函数，后端返回OSS生成的图片访问地址，然后cropsuccess函数将上传成功的图像进行显示。

图片上传（el-upload）+显示（img）

鼠标移动到组件标签上，vscode自动会显示此组件所包含的属性以及可以绑定的属性类型还有使用说明等等下面的五种属性
参数 说明 类型 可选值 默认值

auto_load的默认值就是true，即默认自动上传，否则需要手动确认。

文件上传（el-upload）

因为设置的auto_upload=“false”,所以需要手动确认上传（可以判空再确认）。
this.$refs.upload.submit()相当于 js:document.getElementById("upload").submit()

注意

• name属性值要与后端接口参数MultipartFile的变量名一致，否则无法映射匹配传值。
• 前端标识符属性值和后端参数名称（实体类中属性名）保持一致，否则无法直接映射传参，导致后端接收不到数据。
• 实体类中的变量属性还要设置public set/get方法（可以用lombok的@Data）