[Vue]对图片上传组件的封装

最新推荐文章于 2024-01-08 17:11:33 发布

求你们别学了

最新推荐文章于 2024-01-08 17:11:33 发布

阅读量693

点赞数 1

分类专栏： Vue 文章标签： upload vue.js

本文链接：https://blog.csdn.net/qq_42241722/article/details/104405791

版权

本文介绍了一个基于Vue.js的ImgUpload组件的封装过程，包括如何在项目中使用该组件，以及后台如何处理图片上传并返回图片名称。

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

ImgUpload.vue

<template>
  <el-upload
    class="img-upload"
    ref="upload"
    action="http://localhost:9527/img/upload"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="handleSuccess"
    multiple
    :limit="1"
    :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>
</template>

<script>
  export default {
   
    name: