elementUI中el-upload的使用以及遇到的坑（手动上传案例

转载

lenglingx 2023-11-24 14:31:47 博主文章分类：Vue

elementUI中el-upload的使用以及遇到的坑（手动上传案例）

做项目时遇到一个需求，支持同时上传多个图片。element-ui 的 upload 组件支持多选文件，只需要配置参数 multiple 为 true 即可。但是这个组件默认会将多选的文件分多次进行上传，于是就会存在多次的上传请求（即同时上传3个文件，会同时调用3次上传接口，如图），由于后台的接口要求是一次请求能够上传多个文件，且我们也知道请求多了会对服务器造成更大的压力。

elementUI中el-upload的使用以及遇到的坑（手动上传案例_Data

elementUI中el-upload的使用以及遇到的坑（手动上传案例_Data_02

那么就要想办法解决上述问题，也就是说无论用户同时上传多少个文件，都只调用一个上传接口。

方法1：通过配置file-list

auto-upload 设置为false，关闭组件的自动上传功能；
file-list 配置一个数组用于接收上传的文件列表；
multiple 设置为 true表示支持多选文件；
accept 配置上传文件的类型；
limit配置最大允许上传个数；
通过点击按钮手动调用上传函数 submitUpload ，创建一个 FormData 把 fileList 的文件存进去。

html部分：

<el-upload
            class="upload-demo"
            ref="upload"
            accept=".png,.jpg"
            action="#"
            :limit="5"
            multiple
            :on-exceed="onExceed"
            :file-list="fileList"
            :on-change="handlChange"
            :auto-upload="false"
          >
            <div style="display: flex; align-items: center">
              <el-button slot="trigger" size="small" plain>选取文件</el-button>
              <div
                slot="tip"
                class="el-upload__tip el-icon-warning-outline"
                style="margin-left: 10px; color: #f56c6c"
              >
                只能上传.png,.jpg文件
              </div>
            </div>
          </el-upload>
            <el-button type="primary" @click.stop="submitUpload"
              >上 传</el-button
            >

js部分：

 data() {
    return {
      fileList: [],   
    };
  },
 methods: {
    handlChange(file, fileList) {
      this.fileList = fileList;
    },
    // 上传文件超出报错
    onExceed(files, fileList) {
      this.$tool.message(`目前只支持上传5个文件， 请删除后再次选择！`, "error");
    },
    // 上传到后台
    async submitUpload() {
      if (this.$refs.upload.uploadFiles.length > 0) {
        const formData = new FormData();//  用FormData存放上传文件
        this.fileList.forEach((file) => {
          formData.append("files", file.raw);
        });
        //uploadBootLogo是上传接口
        await uploadBootLogo(formData).then((res) => {
          this.$tool.message("上传成功", "success");
          this.fileList = [];
        });
      } else {
        this.$tool.message("请上传资源文件", "error");
      }
    },
  },

方法2：配置http-request

http-request 自定义上传方法；
通过点击按钮手动调用上传函数 submitUpload，创建一个 FormData, 调用 upload 组件的 submit 方法的时候会循环调用 http-request 配置的方法，从而往 FormData 里存放文件。

html部分：

<el-upload
            class="upload-demo"
            ref="upload"
            accept=".png,.jpg"
            action="#"
            :limit="5"
            multiple
            :on-exceed="onExceed"
            :file-list="fileList"
            :on-change="handlChange"
            :auto-upload="false"
            :http-request="uploadFile"
          >
            <div style="display: flex; align-items: center">
              <el-button slot="trigger" size="small" plain>选取文件</el-button>
              <div
                slot="tip"
                class="el-upload__tip el-icon-warning-outline"
                style="margin-left: 10px; color: #f56c6c"
              >
                只能上传.png,.jpg文件
              </div>
            </div>
          </el-upload>
            <el-button type="primary" @click.stop="submitUpload"
              >上 传</el-button
            >

js部分：

 data() {
    return {
      fileList: [],
      filedata: new FormData(),   
    };
  },
 methods: {

    // 上传到后台
    async submitUpload() {
      if (this.$refs.upload.uploadFiles.length > 0) {
        let tempData = this.filedata;
        this.filedata = new FormData();//  用FormData存放上传文件
        this.$refs.upload.submit();// 会循环调用uploadFile方法，多个文件调用多次
        //uploadBootLogo是上传接口
        await uploadBootLogo(this.filedata).then((res) => {
          this.$tool.message("上传成功", "success");
          this.fileList = [];
        });
      } else {
        this.$tool.message("请上传资源文件", "error");
      }
    },
     // 上传文件
    uploadFile(file) {
      this.filedata.append("files", file.file);
    },
    handlChange(file, fileList) {
      this.fileList = fileList;
    },
    // 上传文件超出报错
    onExceed(files, fileList) {
      this.$tool.message(`目前只支持上传5个文件， 请删除后再次选择！`, "error");
    },
  },

转自：https://blog.csdn.net/fangqi20170515/article/details/131393214

elementUI使用el-upload上传文件写法总结及避坑，上传图片/视频到本地/服务器以及回显+删除

Element Upload 上传

Element Upload官方文档：el-upload

具体细节只看官方文档，本篇主要介绍避坑点和用法总结

注意点以及坑

1.本地上传想要回显图片视频，使用on-success是没办法再在上传后获取到本地文件路径后进行回显的，因为只有在上传的action成功，即不报错的情况下才会调用，本地上传用的action="#这个接口不存在，所以也不会上传成功，更不会调用获取到文件参数进行回显

elementUI中el-upload的使用以及遇到的坑（手动上传案例_上传文件_03

2.如果想要先在本地进行回显，然后再上传的话，需要使用on-change钩子（还需:auto-upload ="false"）获取文件本地路径，再生成一个formData传给后端上传文件的接口，

elementUI中el-upload的使用以及遇到的坑（手动上传案例_上传文件_04

3.官方文档中提供的上传图片接口https://jsonplaceholder.typicode.com/posts/现已无法使用

elementUI中el-upload的使用以及遇到的坑（手动上传案例_上传文件_05

el-upload上传文件用法总结

1. 上传单张图片到服务器并进行回显，不可删除只能替换

这种上传单张图片的运行场景一般是上传头像，没有删除功能，只能进行替换

<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. 拖拽上传单张图片到本地回显再上传到服务器，可删除

可以手动上传，也可以拖拽上传，图片可以在没有后端上传接口时进行回显，可删除
template:

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

data:

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

method:

 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 = "";
    },

elementUI中el-upload的使用以及遇到的坑（手动上传案例_Data_06

3. 多图上传到服务器，可回显预览删除

list-type="picture-card"hover会自动有预览删除菜单，不需自己写样式，绑定事件即可

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

转自：https://blog.csdn.net/qq_23073811/article/details/126216368