element----el-upload附件上传与附件回显

最新推荐文章于 2024-08-23 11:05:18 发布

左手牵♪♡右手

最新推荐文章于 2024-08-23 11:05:18 发布

阅读量6.2k

点赞数 1

分类专栏： element 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45102212/article/details/121394660

版权

本文介绍了如何在Vue.js项目中封装一个公共组件，用于处理附件的上传和回显功能。通过新建文件夹并编写相关代码，利用getToken获取用户凭证，实现在页面中简单引用组件即可实现附件操作。

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

开发中经常也会遇到附件的上传和回显，最方便的就是我们封装一个公共组件在页面中引用
1、上传
在src里面新建一个文件夹
在这里插入图片描述

<template>
  <el-upload class="upload-demo"
             multiple
             :limit="limit"
             :accept="accept"
             :headers="headers"
             :file-list="fileList"
             :action="uploadImgUrl"
             :on-exceed="handleExceed"
             :on-remove="handleRemove"
             :on-success="handleSuccess"
             :before-upload="beforeUpload"
             :on-error="handleUploadError">
    <!-- :on-preview="handlePreview" -->
    <el-button size="small"
               type="primary">点击上传</el-button>
    <div slot="tip"
         class="el-upload__tip"
         style="color:#909399">
      支持上传{
  { accept === "*" ? "所有" : accept }}文件，且不超过20MB,附件名称不能超过50字
    </div>
  </el-upload>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  components: {},
  props: {
    value: {
      type: String,
      default: null
    },
    accept: {
      type: String,
      default: '*'