首页 前端知识 VUE 使用 elementUI 实现文件上传

VUE 使用 elementUI 实现文件上传

2024-06-08 09:06:52 前端知识 前端哥 336 376 我要收藏

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 就是要传给后台的参数了

结束

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11408.html
标签
评论
发布的文章

echarts柱状图自动轮播

2024-06-16 01:06:46

Echarts--markPoint属性

2024-06-16 01:06:45

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!