iview upload爬坑 之手動上傳以及動態修改附帶參數 附後臺接受測試代碼

今天用iview 的upload 上傳文件,除文件外還想傳其他參數,所以需要手動控制upload 上傳,看了官網手動上傳例子,發現起並沒有真正上傳,只是延遲時間給看了看效果,官網例子如下

不想吐槽這官網了,直接百度搜索手動上傳,真的是醉了,全是一樣的文章,抄襲都不帶改的,而且都沒有解決問題,還是自己動手吧。

在upload 組件加了ref=upload,並且打印這個組件 

    <div>
        <Upload
                ref=upload  //添加名稱
            :before-upload="handleUpload"
            action="//jsonplaceholder.typicode.com/posts/">
            <Button icon="ios-cloud-upload-outline">Select the file to upload</Button>
        </Upload>
        <div v-if="file !== null">Upload file: {{ file.name }} <Button type="text" @click="upload" :loading="loadingStatus">{{ loadingStatus ? 'Uploading' : 'Click to upload' }}</Button></div>
    </div>
            upload () {
                this.loadingStatus = true;
               console.log(this.$refs.upload);  //打印組件
                setTimeout(() => {
                    this.file = null;
                    this.loadingStatus = false;
                    this.$Message.success('Success')
                }, 1500);
            }

upload () {
                this.loadingStatus = true;
               console.log(this.$refs.upload);  
               this.$refs.upload.post(this.file);  //手動上傳
                setTimeout(() => {
                    this.file = null;
                    this.loadingStatus = false;
                    this.$Message.success('Success')
                }, 1500);
            }

一測試,ok,手動上傳問題解決!

解決辦法:1、upload組件打ref=upload

                  2、 this.$refs.upload.post(this.file);  手動上傳

好了,手動上傳問題解決,自己需要附帶參數,查官網,發現自帶了附加參數data可以傳參,開心的就去試了試

試試直接上代碼

        <Upload ref="upload"
                type="drag"
                :before-upload="handleUpload"
                :data="uploadData"   //附帶參數
                action="//localhost:8080/upload/">
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>Click or drag files here to upload</p>
            </div>
        </Upload>
 upload () {
                this.loadingStatus = true;
               console.log(this.$refs.upload);  
               this.$refs.upload.post(this.file);
              this.uploadData= {name:this.name,time:this.time,type:this.type} //附帶參數
                setTimeout(() => {
                    this.file = null;
                    this.loadingStatus = false;
                    this.$Message.success('Success')
                }, 1500);
            }

我的界面是這樣的:按1-2-3-4順序操作,發現後進行post的時候並沒有攜帶參數

試了很多想法,最後發現是當你選擇了文件的時候,就得把參數寫好,也就在開始上傳的函數before-upload 中把參數生成,

於是修改代碼,爲

            handleUpload (file) {
                this.file = file;
               this.uploadData= {name:this.name,time:this.time,type:this.type} //修改參數位置
                return false;
            },
            upload () {
                this.loadingStatus = true;
               console.log(this.$refs.upload);  
               this.$refs.upload.post(this.file);
             
                setTimeout(() => {
                    this.file = null;
                    this.loadingStatus = false;
                    this.$Message.success('Success')
                }, 1500);
            }

按照1-2-3-4 順序走了一遍發現 參數正常傳遞了!!!

但是,等我先做了第4步,也就是先上傳文件,在修改上面的參數,發送提交到後臺的數據,根本沒有改變,比如我上傳了文件,修改上旬爲中旬,發現提交到後臺的數據還是上旬。

也就是說當你經過了before-upload 以後,參數就沒有改變,心想還是打印data這個參數看看吧,

            upload () {
                this.loadingStatus = true;
               console.log(this.$refs.upload.data);  //打印data
               this.$refs.upload.post(this.file);
             
                setTimeout(() => {
                    this.file = null;
                    this.loadingStatus = false;
                    this.$Message.success('Success')
                }, 1500);
            }

一打印,發現有get \set 方法,瞬間就開心起來了,走起!改代碼

            upload () {
                this.loadingStatus = true;
                this.$set(this.$refs.upload.data, 'name', this.name);  //更新參數
                this.$set(this.$refs.upload.data, 'time', this.time));
                this.$set(this.$refs.upload.data, 'type', this.type);
               this.$refs.upload.post(this.file);
             
                setTimeout(() => {
                    this.file = null;
                    this.loadingStatus = false;
                    this.$Message.success('Success')
                }, 1500);
            }

好了,問題全部解決!

最後附上 java 寫的後臺接受測試方法:

	@PostMapping("/")
	public String upload(@RequestParam("file") MultipartFile file ,HttpServletRequest request) {
		System.out.println(file.getName() + "      " + file.getOriginalFilename());
		System.out.println(request.getParameter("name"));
		System.out.println(request.getParameter("time"));
		System.out.println(request.getParameter("type"));
		return "2";
	}

tip:若本文幫助到了你,請點個贊吧!!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章