91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Ant?Design?Upload文件上傳功能怎么實現

發布時間:2023-05-06 15:46:18 來源:億速云 閱讀:245 作者:iii 欄目:開發技術

今天小編給大家分享一下Ant Design Upload文件上傳功能怎么實現的相關知識點,內容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。

一、Ant Design Vue文件上傳功能

1.文件上傳選項框

 <a-modal
      title="上傳文件"
      :footer="null"//不顯示底部按鈕
      :visible="visible"//是否顯示
      :confirmLoading="confirmLoading"//確定按鈕 loading
      @cancel="handleCancel"//取消方法
    >
      <a-upload
        :fileList="fileList"//上傳的文件列表
        :remove="handleRemove"//文件刪除方法
        :beforeUpload="beforeUpload"//上傳文件之前的鉤子,參數為上傳的文件
      >
        <a-button>
          <a-icon type="upload" />選擇文件
        </a-button>
      </a-upload>
    </a-modal>
<div class="streetAdd">
      <a-button type="primary" icon="plus" @click="engineeringadd()">新增</a-button>
      <a-button type="primary" icon="file" @click="showModal()">數據導入</a-button>
    </div>

效果:

Ant?Design?Upload文件上傳功能怎么實現

Ant?Design?Upload文件上傳功能怎么實現

2.js實現代碼

//定義的變量
<script>
export default {
	data() {
	    return {
	      visible: false,
	      confirmLoading: false,
	      fileList: [],
	      IpConfig: this.IpConfig.projectServiceDomain,
	    }
	  },
	mounted: function () {
	    this.engineeringList()
	    //that.alarmTypes=res.data.res.dictionaryList;
	  },
	   methods: {
		   //點擊數據導入按鈕所調用的方法
		    showModal() {
		      this.visible = true
		    },
		    //對話框確認方法
		    handleOk(e) {
		      this.visible = false
		      this.confirmLoading = false
		    },
		    //關閉彈框
		    handleCancel(e) {
		      //console.log('Clicked cancel button')
		      this.visible = false
		    },
		    //刪除上傳文件
		    handleRemove(file) {
		      const index = this.fileList.indexOf(file)
		      const newFileList = this.fileList.slice()
		      newFileList.splice(index, 1)
		      this.fileList = newFileList
		    },
		    //顯示上傳文件內容
		    beforeUpload(file) {
		      this.spinning = true
		      var that = this
		      that.visible = false
		      //文件類型
		      var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
		      if (fileName != 'xlsx' && fileName != 'xls') {
		        this.$message.error('文件類型必須是xls或xlsx!')
		        this.spinning = false
		        that.visible = true
		        return false
		      }
		      //讀取文件大小
		      var fileSize = file.size
		      //console.log(fileSize)
		      if (fileSize > 1048576) {
		        this.$message.error('文件大于1M!')
		        this.spinning = false
		        that.visible = true
		        return false
		      }
		      let fd = new FormData()//表單格式
		      fd.append('file', file)//添加file表單數據
		      let url = this.IpConfig + '/xing/jtGongLuShouFeiZhan/upload'
		      this.$ajax({
		        method: 'post',
		        url: url,
		        data: fd,
		        headers: {
		          'Content-Type':
		            'multipart/form-data;boundary=' + new Date().getTime(),
		        },
		      })
		        .then((rsp) => {
		          console.log(rsp)
		          let resp = rsp.data
		          if (rsp.status == 200) {
		            that.fileList = []
		            that.visible = false
		            that.confirmLoading = false
		            that.$message.success('文件上傳成功!')
		            this.spinning = false
		          } else {
		            this.$message.error('文件上傳失敗!')
		            that.visible = true
		          }
		        })
		        .catch((error) => {
		          this.$message.error('請求失敗! error:' + error)
		          this.spinning = false
		          that.visible = true
		        })
		      return false
		    }
	    }
    }
</script>

二、Ant Design React文件上傳功能

1.文件上傳選項框

render() {
        const upLoad = {
            name: 'files',
            action: 'http://192.168.0.102:7072/folder/annex/upload',//文件上傳地址
            headers: {
                authorization: 'authorization-text',
            },
            onChange: this.handleChange.bind(this),//上傳文件改變時的狀態
            showUploadList: false,//是否展示文件列表
        }
        const { page, pages, fileType } = this.state;

        return (<React.Fragment>
        		<div className={styles.tableBtnBox}>
                            <Button disabled={this.state.showBtn} type="primary">新建</Button>
                            <Button 
	                            disabled={this.state.showBtn} //是否可用
	                            onClick={this.onUpload.bind(this)} //點擊方法
	                            className={styles.uploadBtn} //樣式
	                            type="primary"
	                            ghost
                             	>上傳</Button>
                        </div>
                        
						<Modal
                            title="文件上傳"
                            visible={this.state.uploadState}//是否顯示
                            onOk={this.handleOk.bind(this)}//確認方法
                            onCancel={this.handleCancel.bind(this)}//取消方法
                        >
                            <Dragger {...upLoad}>
                                <p className="ant-upload-drag-icon">
                                    <InboxOutlined />
                                </p>
                                <p className="ant-upload-text">單擊或拖動文件到此區域以上傳</p>
                            </Dragger>,
                		</Modal>
                		
                </React.Fragment>)
      }

效果:

Ant?Design?Upload文件上傳功能怎么實現

2. js實現代碼

//點擊上傳按鈕方法
   onUpload() {
           this.setState({
               uploadState: true,
           })
       }

   //文件上傳
   handleChange(info) {
       var fileSize = info.file.size;
       if (info.file.status === 'done') {
           if (info.file.response.code === 500) {
               message.error('上傳文件失敗');
               return
           }
           let response = info.file.response.res[0];
           if (response.suffix == 'xlsx' || response.suffix == 'docx' || response.suffix == 'pdf') {//當文件類型是xlsx,docx,pdf三種格式時
               let userid = Number(localStorage.getItem('userid'));
               const baseUrl = 'http://192.168.0.123:8889';
               const api = '/zhyjxxzhpt/file/upload';
               let fd = new FormData();//表單格式
               fd.append("userid", userid);//添加userid數據
               fd.append("id", response.id);//添加id數據
               fd.append("name", response.name);//添加name數據
               fd.append("suffix", response.suffix);//添加suffix數據
               fd.append("type", response.type);//添加type數據
               axios({
                   url: baseUrl + api,//文件數據保存的地址
                   method: "post",
                   data: fd,
                   headers: {
                       "Content-Type": "multipart/form-data;boundary=" + new Date().getTime()
                   }
               }).then(res => {
                   if (res.data.code == 'success') {
                       message.success(`${response.name} 文件上傳成功!`);
                   }

                   this.queryPrivate();

               })
           } else {
               message.error(`只能上傳xlsx,docx,pdf文件!`);
               return false
           }

       } else if (info.file.status === 'error') {
           if (fileSize > 1048576) {
               message.error(`${info.file.name}文件大于1M!`);
           } else {
               message.error(`${info.file.name} 文件上傳失敗!`);
           }

       }
   }
//點擊確定按鈕方法
   handleOk = e => {
       this.setState({
           uploadState: false,
       });
   };
//取消方法
   handleCancel = e => {
       this.setState({
           uploadState: false,
       });
   };

以上就是“Ant Design Upload文件上傳功能怎么實現”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

巧家县| 兴仁县| 吴堡县| 广东省| 岳普湖县| 揭东县| 乳山市| 拜城县| 太康县| 大城县| 冷水江市| 视频| 揭东县| 宜州市| 芒康县| 岫岩| 东港市| 济源市| 临朐县| 阿拉尔市| 新平| 沧源| 富民县| 广东省| 云浮市| 浏阳市| 四会市| 木兰县| 观塘区| 商水县| 佛教| 济源市| 东阳市| 中卫市| 海南省| 洪泽县| 甘德县| 抚松县| 彩票| 石首市| 吉木乃县|