JS Element-UI 实现图片上传

xiaomazhuli

已于 2022-05-17 17:37:12 修改

阅读量389

点赞数

文章标签： elementui vue.js 前端

于 2022-05-17 17:29:18 首次发布

本文链接：https://blog.csdn.net/xiaomazhuli/article/details/124825959

版权

本文档详细介绍了如何在Vue.js项目中结合Element-UI组件库实现图片上传功能，包括配置和使用步骤，帮助前端开发者快速集成这一常见需求。

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

工作中如果有您解决不了的问题或者您花费2小时还没解决的问题，这里可以有偿帮您高效直接解决bug，我们团队的微信号是18062748486；如加微信，请备注“Bug 解决“；

<el-upload
    ref="myuploader"
    :with-credentials="true"
    class="avatar-uploader"
    :action="uploadUrl"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    v-loading="imgLoading"
>

export default {
  data() { 
   uploadUrl: upload, //图片的上传地址

  }

 beforeAvatarUpload(file) {
    data(){
      this.imgLoading = true;
      let imgType = ["image/png", "image/jpeg", "image/jpg", "image/gif"];
      let imgType2 = ["image/gif"];
      const isJPG =
        this.addbannerform.position === 2 || this.currentObj.position === 2