ElementUI usa el-upload para cargar un resumen de escritura de archivos y evitar trampas, cargar imágenes/videos al local/servidor y hacer eco + eliminar

Elemento Subir Subir

Elemento Cargar documento oficial: los
detalles específicos de la carga solo se refieren al documento oficial, este artículo presenta principalmente la prevención de errores y el resumen de uso

Puntos de atención y pits

• Si desea repetir la imagen y el video para la carga local, on-successno hay forma de repetirlo después de obtener la ruta del archivo local después de la carga, porque solo se llamará cuando la carga sea actionexitosa, es decir, no se informa ningún error action="#. se utiliza para la carga local La interfaz no existe, por lo que la carga no se realizará correctamente, ni llamará para obtener los parámetros del archivo para echo
  

• Si desea hacer eco localmente primero y luego cargar, debe usar on-changeel gancho (necesita :auto-upload ="false") obtener la ruta local del archivo y luego generar una formDatainterfaz para cargar el archivo en el backend.
  

• La interfaz de carga de imágenes proporcionada en el documento oficial https://jsonplaceholder.typicode.com/posts/ya no está disponible
  

• Aquí hay un resumen de varios métodos de carga de archivos comúnmente utilizados :

el-upload resumen de uso del archivo de carga

1. Cargue una sola imagen en el servidor y reprodúzcala, no se puede eliminar, solo se puede reemplazar

Este tipo de escenario de operación de cargar una sola imagen es generalmente para cargar el avatar, no hay una función de eliminación, solo para reemplazar

<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. Arrastre y suelte para cargar una sola imagen en el eco local y luego cárguela en el servidor, se puede eliminar

Se puede cargar manualmente o cargar arrastrando y soltando. La imagen se puede repetir cuando no hay una interfaz de carga de back-end, y
la plantilla se puede eliminar:

<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>

datos:

 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. Se cargan varias imágenes en el servidor y se pueden repetir, previsualizar y eliminar.

list-type="picture-card"hover tendrá automáticamente un menú de eliminación de vista previa, no es necesario que escriba el estilo usted mismo, simplemente vincule el 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>