element-ui实现多文件上传删除

element-ui实现多文件上传删除

1,使用 element-ui 的 Upload 上传组件

直接贴代码了

html

  <div class="addFile">
    <el-upload
      action
      multiple
      :on-remove="handleRemove" //删除
      :http-request="handleChange" //上传接口函数
      :file-list="handleFileList"	//上传文件的list
      :on-change="handleChangeStatus" 
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>

js

	data(){
		retrun {
			arr:[], //后端字段数组
			handleFileList: [], //文件数组
		}
	}
	//删除函数
    handleRemove(file, fileList) {
      this.arr = [];
      // 创建整改，移除上传
      this.handleFileList = fileList;
      fileList.forEach((item) => {	//根据返回fileList循环进行删除
        this.getUpload(item.raw);
      });
    },
    //循环删除函数
    getUpload(file) {
      let formData = new FormData();
      formData.append("source", file);
      this.$axios({
        method: "post",
        url: "/api/**/****", //接口
        data: formData,
      }).then((res) => {
        if (res.data.status == 1) {
          let url = res.data.url;	//拿到接口url字段
          this.arr.push(url);	//重新push
          this.$message.success("删除成功！");
        }
      });
    },
    //上传函数
    handleChange(param) {
      let formData = new FormData();
      formData.append("source", param.file);
      //设置formData
      this.$axios({
        method: "post",
        url: "/api/**/****",
        data: formData,
      }).then((res) => {
        if (res.data.status == 1) {
          let url = res.data.url; //拿到接口url字段
          this.arr.push(url); //push数据
          this.$message.success("上传成功！");
        }
      });
    },

希望此文章能帮助到你