ElementUI usa el-upload para fazer upload do resumo da gravação do arquivo e evitar armadilhas, fazer upload de fotos/vídeos para local/servidor e eco + excluir

Carregar Elemento Carregar

Documento oficial do Element Upload: os detalhes específicos do el-upload
referem-se apenas ao documento oficial, este artigo apresenta principalmente a prevenção de armadilhas e o resumo do uso

Pontos de atenção e poços

• Caso queira ecoar a foto e o vídeo para upload local, on-successnão há como fazer eco após pegar o caminho do arquivo local após o upload, pois ele só será chamado quando o upload for actionbem sucedido, ou seja, nenhum erro é reportado action="#. éusado para upload local A interface não existe, então o upload não será bem-sucedido, nem chamará para obter os parâmetros do arquivo para eco
  

• Se você deseja ecoar localmente primeiro e depois fazer o upload, precisa usar on-changeo gancho (necessário :auto-upload ="false") obter o caminho local do arquivo e, em seguida, gerar uma formDatainterface para fazer o upload do arquivo para o back-end.
  

• A interface de upload de imagem fornecida no documento oficial https://jsonplaceholder.typicode.com/posts/não está mais disponível
  

• Aqui está um resumo de vários métodos de upload de arquivos comumente usados :

el-upload resumo de uso do arquivo de upload

1. Carregue uma única imagem para o servidor e faça eco dela, ela não pode ser excluída, mas apenas substituída

Esse tipo de cenário de operação de upload de uma única imagem geralmente é para fazer upload do avatar, não há função de exclusão, apenas para substituir

<el-upload
  class="avatar-uploader"
  action="后端上传接口"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<style>
 /deep/ .avatar-uploader .el-upload {
      
      
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
      
      
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
      
      
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
      
      
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

<script>
  export default {
      
      
    data() {
      
      
      return {
      
      
        imageUrl: ''
      };
    },
    methods: {
      
      
      // 上传成功后的回显
      handleAvatarSuccess(res, file) {
      
      
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      // 上传前对类型大小的验证
      beforeAvatarUpload(file) {
      
      
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
      
      
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
      
      
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

2. Arraste e solte para fazer upload de uma única imagem para o eco local e, em seguida, faça o upload para o servidor, pode ser excluído

Pode ser carregado manualmente ou arrastando e soltando. A imagem pode ser repetida quando não há interface de upload de back-end e
o modelo pode ser excluído:

<el-upload
          drag
          action="#"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="uploadFile"
          accept="image/jpg,image/jpeg,image/png"
        >
          <i
            v-if="imageUrl1"
            class="el-icon-circle-close deleteImg"
            @click.stop="handleRemove1"
          ></i>
          <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />

          <div v-else>
            <i
              class="el-icon-picture"
              style="margin-top: 40px; font-size: 40px; color: #999a9c"
            ></i>
            <div class="el-upload__text1">上传图片</div>
            <div class="el-upload__text">* 建议尺寸比例2.2:1，不超过4m，</div>
            <div class="el-upload__text">格式为png、jpeg或jpg</div>
          </div>
        </el-upload>
<style scoped>
.deleteImg {
      
      
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}
</style>

dados:

 data() {
    
    
      return {
    
    
        imageUrl1: ''
      };
    },

método:

 uploadFile(item) {
    
    
      console.log(item);

      let formData = new FormData();
      let file = item.raw;
      this.imageUrl1 = URL.createObjectURL(file);
      formData.append("file", file);
      // 传formData给后台就行
      // 比如
      // 接口(formData).then(res=>{
    
    
          // this.videoUrl=res.url
      // })
    },
    // 删除只需清空imageUrl1即可
   handleRemove1(file, fileList) {
    
    
      // console.log(file, fileList);
      this.imageUrl1 = "";
    },

3. Várias imagens são carregadas no servidor e podem ser repetidas, visualizadas e excluídas

list-type="picture-card"hover terá automaticamente um menu de exclusão de visualização, não há necessidade de escrever o estilo você mesmo, basta vincular o evento

<el-upload
  action="后端接口地址"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
  export default {
      
      
    data() {
      
      
      return {
      
      
        dialogImageUrl: '',
        dialogVisible: false
      };
    },
    methods: {
      
      
      handleRemove(file, fileList) {
      
      
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
      
      
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>