請求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
})
}
}
}
}