Elememt el-upload carregar componente de imagem

Cenas

Use o componente el-upload para fazer upload de várias imagens para limitar o tamanho e a quantidade e limite de velocidade de upload do OSS para evitar o upload de várias imagens em um segundo

configuração do atributo el-upload

亿点小知识：这个官网说是必传但是我们在开发中实际用不到 具体写法看代码

• ação: URL para upload
• auto-upload : se deve carregar imediatamente após selecionar o arquivo
• list-type: o tipo de lista de arquivos
• on-exceed: o gancho quando o número de arquivos excede o limite
• limite: o número máximo de uploads permitidos
• on-change: o gancho quando o status do arquivo muda, ele será chamado ao adicionar um arquivo, upload com sucesso e upload com falha
• file-list: lista de arquivos enviados, por exemplo: []
• on-remove: o gancho antes de deletar o arquivo
  Acima estão os atributos usados ​​desta vez

Explicação detalhada

Os serviços que podem ser realizados incluem:
controle de quantidade de arquivos de upload, limite de tamanho e formato de upload, vários ganchos no processo de upload, exibição da lista de arquivos enviados, envio de dados ao fazer upload, seleção e upload separadamente, por exemplo
:

• função de gancho on-exceed (arquivos, lista de arquivos) quando o número de arquivos excede o limite.
  Este evento geralmente precisa ser vinculado ao limite acima. Por exemplo, o acima: limit="3" mostra que o número é limitado. Se houver mais de três, um dará um lembrete

• before-remove="beforeRemove" é um gancho antes de excluir arquivos. O parâmetro é o arquivo carregado e a lista de arquivos. Se retornar false ou retornar Promise e for rejeitado, a exclusão será interrompida. function(arquivo, lista de arquivos)

• Limite de tamanho e tipo de upload de arquivo: :before-upload="beforeAvatarUpload" pode adicionar verificação neste método, da seguinte forma, de modo que, se o arquivo for carregado, se a imagem não for qualificada, ela será rejeitada diretamente

Código real

HTML

<el-upload ref="imgList1D" 
action 
   :auto-upload="false"  // 选取文件后不进行上传
   list-type="picture-card" // 类型
   :on-exceed="linmitFun" // 超出数量方法
   :limit="4" // 限制数量
   :on-change="imgAdd" // 触发时的方法 
   :file-list="imgList" // 列表
   :on-remove="remove"  // 删除方法
   v-loading="isloading"  // 控制 oss 加载中的时候 限制不让操作
   >
  <i class="el-icon-plus"></i> // 添加html
</el-upload>
 <div>单次最多可选4张,仅支持上传jpg/png/jpeg格式文件，单个文件不能超过500kb</div>

js

• método de mudança

async imgAdd(file) {
    
    
      this.isloading = true
      const typeArr = ["image/jpg", "image/jpeg", "image/png"]; 
      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
    
    
        this.Ptloading = false;
        this.$message.error("只能上传图片!");
        this.$refs.upload1.clearFiles();
        this.isloading = false
        return;
      }
      if (!isLt5M) {
    
    
        this.$message.error("上传图片大小不能超过 5MB!");
        fileList.pop();
        this.isloading = false
        return;
      }
      const url = await upFile(file); //上传 oss接口 
      this.imgList.push(
        {
    
    
          url: url,
          uid: file.uid,
        });
        this.isloading = false
    },

• método de exclusão ao remover

remove(file, fileList) {
    
    
      this.on-remove = fileList;
 },

• ao exceder excede o método de limite de quantidade

linmitFun() {
    
    
      this.$message({
    
    
        message: "最多上传4张图片",
        type: "warning",
      });
    },

O item acima é o componente Elememt el-upload de upload de imagem. Obrigado por ler.
Se você encontrar outros problemas, pode discutir e estudar comigo em particular.
Se for útil para você, 点赞marque-o como favorito. Obrigado~!
Preste atenção aos blogueiros favoritos e continue atualizando...