今天用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:若本文幫助到了你,請點個贊吧!!!!