VUE 使用 elementUI 实现文件上传

VUE 使用 elementUI 实现文件上传

废话少说直接上代码

1、文件上传接口只要求file二进制文件，无需其他参数

// 这里是element 中的上传示例代码
<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-change="onChange"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

如果你上传文件不需要传参的话，可以直接将上传路径写到action中

action=“https://jsonplaceholder.typicode.com/posts/”

2、文件上传需要file文件和其他参数

1、element 提供了 data 属性 【上传时附带的额外参数】

今天我们用另一个比较通用的方法

1、可以将 action=“#” 改成这样，取消默认上传路径。
2、通过 on-change 事件，监听添加文件事件。
3、获取 file 二进制文件。

有些事件和参数可以根据需求添加

<el-upload
  class="upload-demo"
  action="#"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-change="onChange" > 
</el-upload>

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

结束