前端vue怎么实现文件上传
1、data.js中定义export default{init :function(){return{fileList:[],token:{accessToken:''}}}}1...
·
1、data.js中定义
export default{
init :function(){
return{
fileList:[],
token:{
accessToken:''
}
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
2、xxx.vue中
<template>
<section>
<el-row>
<el-form-item>
<el-upload
class="upload-demo"
action="http://192.168.400.56:9000/file/rest/common/uploadFilesClientByArray"
:data='token'
:on-change="handleChange"
:on-remove="handleRemove"
:file-list="fileList">
<el-button size="small" type="primary">上传附件</el-button>
</el-upload>
</el-form-item>
</el-row>
</section>
</template>
<script>
import data from './data';
import methods from './method';
export default{
data() {
return data.init();
},
methods:methods
}
</script>
<style>
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
注:1、接口接收accessToken的值放在请求头中,将上面的:data=”token” 改成:headers=”token”即可
2、action即为附件的上传接口的详细地址
3、data是传递参数的
4、fileList是上传回调的数据数组
3、method.js中
export default{
handleChange(file, fileList) {
this.fileList = fileList;
var ids=handleUpOrDel(fileList);
},
handleRemove(file, fileList){
this.fileList = fileList;
var ids=handleUpOrDel(fileList);
},
handleUpOrDel(fileList){
let ids="";
if(fileList){
for(var i =0; i < fileList.length; i++){
console.log(fileList[i].response);
var obj = fileList[i].response;
if(obj){
if(obj.code){
ids +=obj.record.successResponse[0].id;
if(i < fileList.length - 1){
ids +=",";
}
}
}
}
}
return ids;
}
}
更多推荐
已为社区贡献8条内容
所有评论(0)