element上传图片

在这里插入图片描述

<el-form-item label="上传:">
            <el-upload class="upload-demo" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :headers="headers" :action="updateUrl"
               :on-success="handleSuccess" multiple :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
 </el-form-item>

data里

updateUrl:process.env.VUE_APP_BASE_API + '/resource/oss/upload',
headers: {
  Authorization: 'Bearer '
},
fileList :[]
created() {
  const adminToken = this.getCookie('Admin-Token');
  if (adminToken) {
     this.headers.Authorization = `Bearer ${adminToken}`;
   }
 },
methods: {
      getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
      },

	handleSuccess(response, file, fileList) {
        console.log('Upload response:', response);
        this.caseInfo.fvUrl.push(response.data.url)
      },
      beforeAvatarUpload(file) {
        const allowedFormats = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/webp'];
        const isValidFormat = allowedFormats.includes(file.type);
        if (!isValidFormat) {
          this.$message.error('请上传JPEG、PNG、GIF、BMP或WebP格式的图片');
        }
        return isValidFormat;
      },
 handleRemove(file, fileList) {
        console.log(file, fileList);

        this.fileList = this.fileList.filter(item => item.url !== file.url);
        this.caseInfo.fvUrl = this.caseInfo.fvUrl.filter(url => url !== file.url);
        console.log(this.fileList)
        console.log(this.caseInfo.fvUrl);
      },
}

相关推荐

  1. element-ui图片组件封装

    2024-04-25 03:54:05       40 阅读
  2. nodejs + vue + element 本地调用七牛图片

    2024-04-25 03:54:05       57 阅读
  3. element ui图片组件封装+校验黑白照片

    2024-04-25 03:54:05       54 阅读
  4. vue基于element封装图片,拖拽

    2024-04-25 03:54:05       31 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-25 03:54:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-25 03:54:05       101 阅读
  3. 在Django里面运行非项目文件

    2024-04-25 03:54:05       82 阅读
  4. Python语言-面向对象

    2024-04-25 03:54:05       91 阅读

热门阅读

  1. 单点登录:SAML、OAuth2、OIDC 的区别与联系

    2024-04-25 03:54:05       121 阅读
  2. 具身智能的 Scaling Law

    2024-04-25 03:54:05       33 阅读
  3. FreeSWITCH rtp 统计

    2024-04-25 03:54:05       38 阅读
  4. C++ day2

    C++ day2

    2024-04-25 03:54:05      38 阅读
  5. 通过Redis实现一个异步请求-响应程序

    2024-04-25 03:54:05       35 阅读
  6. Vue通俗概念理解

    2024-04-25 03:54:05       37 阅读