Element中Upload组件上传（图片和文件的默认上传以及自定义上传）

目录

• 一、代码实现(具体配置文档(https://element.eleme.cn/#/zh-CN/component/upload))))
• • [1. 默认图片上传](#1. 默认图片上传)
  • [2. 自定义图片上传](#2. 自定义图片上传)
  • [3. 默认文件上传](#3. 默认文件上传)
• 二、效果图

一、代码实现(具体配置文档)

1. 默认图片上传

1. 适用于：文件上传接口只要求file二进制文件，无需其他参数。(或者配置data属性用于上传时附带的额外参数)。

2. 该实现方式会在选择完图片后就根据配置好的action的接口上传地址自动上传图片。

3. 重点就是配置好action属性，以及限制类型和大小。

2. 自定义图片上传

1. 不需要配置action，使用http-request 覆盖默认的上传行为，可以自定义上传的实现。适用于文件上传需要file文件和其他参数。

2. 或者在http-request的方法中不做任何操作，在before-upload上传前的校验中，保存将要上传的文件file，然后页面根据实际需要，调用方法上传图片。（如在页面中加一个提交按钮，点击调用提交方法上传图片）。

3. 重点简单了解FormData 的使用和Content-Type的类型

   // 可以根据后台接口要求来决定参数的类型
   onChange() {
   //通常文件上传是要用 FormData 格式的
   this.formdata = new FormData()
   this.formdata.append('file', this.file)
   this.formdata.append('name', this.name)
   },
   // this.formdata 就是要传给后台的参数了

4. multipart/form-data支持文件上传的格式，一般需要上传文件的表单则用该类型。

   // 头像上传
   // export function uploadAvatar(data) {
   // return request({
   // url: '/manager/user/uploadAvatar',
   // method: 'post',
   // data: data,
   // headers: {
   // 'Content-Type': 'multipart/form-data'
   // }
   // })
   // }

3. 默认文件上传

1. 和上述图片上传是一样的原理，只不过是限制的类型不一样。

二、效果图