VUE 上传文件和上传图片

最新推荐文章于 2023-09-01 14:55:52 发布

鸦芽_hujiamei

最新推荐文章于 2023-09-01 14:55:52 发布

阅读量1k

点赞数

分类专栏： VUE 文章标签： VUE 文件上传图片上传

本文链接：https://blog.csdn.net/hujiameihuxu/article/details/100761531

版权

本文详细介绍了在Vue.js项目中如何实现文件和图片的上传功能，包括使用HTML5的File API预览文件，axios发送POST请求到服务器，以及如何处理不同类型的上传数据。同时讨论了上传进度显示和错误处理策略。

摘要由CSDN通过智能技术生成

<template>
  <el-form :model="form">
    <el-form-item label="上传文件" :label-width="formLabelWidth">
      <el-upload
        ref="uploadExcel"
        action="https://jsonplaceholder.typicode.com/posts/"
        :limit=limitNum
        :auto-upload="false"
        accept=".xlsx"
        :before-upload="beforeUploadFile"
        :on-change="fileChange"
        :on-exceed="exceedFile"
        :on-success="handleSuccess"
        :on-error="handleError"
        :file-list="fileList">
        <el-button size="small" plain>选择文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xlsx(Excel2007)文件，且不超过10M</div>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button size=