Element-uiマルチファイルアップロード削除を実現

11537 ワード

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("    !");
        }
      });
    },

この文章があなたを助けてくれることを願っています.