请求API
export function uploadProjectFile(data) {
return request({
url: ‘/projectdetails/uploadProjectFile’,
method: ‘post’,
contentType: false,
data
})
}
//data里面定义一个变量length记录选择文件的数量
data() {
return {
fileList:[],//文件存储中间量
}
},
一、自动上传
<el-upload
action="#"
class=“upload-demo”
multiple
:on-change=“slectedChanged”
:http-request=“httpRequest”
选择附件
slectedChanged() {
// 判断上传文件数量
let files = document.querySelector(‘input[type=file]’).files
if (files.length > 0) {
Array.from(files).forEach(file => {
if (this.fileList.indexOf(file) == -1) {
this.fileList.push(file)
}
})
}
return false
},
httpRequest(content) {
// 在该钩子中获取到的都是通过校验的file文件的信息
if (this.fileList.length > 0) {
let formData = new FormData()
this.fileList.forEach(file => {
formData.append(‘file’, file) // 此处’file’是后台接口参数名
})
projectdetails.uploadProjectFile(formData).then(res => {
debugger
})
}
}
二、手动上传
<el-upload
action="#"
class=“upload-demo”
multiple
:on-change=“slectedChanged”
:auto-upload=“false”
选择附件
<el-button size=“small” type=“primary” @click=“uploadData”>上传
slectedChanged() {
// 判断上传文件数量
let files = document.querySelector(‘input[type=file]’).files
if (files.length > 0) {
Array.from(files).forEach(file => {
if (this.fileList.indexOf(file) == -1) {
this.fileList.push(file)
}
})
}
return false
},
uploadData() {
// 保存提交
this.$refs[‘dataForm’].validate(valid => {
if (valid) {
if (this.fileList.length > 0) {
let formData = new FormData()
this.fileList.forEach(file => {
formData.append(‘file’, file) // 此处’file’是后台接口参数名
})
projectdetails.uploadProjectFile(formData).then(res => {
debugger
})
}
}
}
}