vue element-ui el-upload
上传文件时需要携带其他参数
<yu-upload class="upload-demo" action="/" :on-change="loadJsonFromFile" :auto-upload="false" :limit="1">
<yu-button size="mini" type="primary">点击上传</yu-button>
</yu-upload>Ï
on-change 属性 获取选择文件
loadJsonFromFile(file, fileList) {
console.log('file',file); //文件
console.log('fileList',fileList);//文件列表
},
利用接口上传文件以及其他参数
uploadSure(){
const _this = this
let formData = new FormData()
formData.append('operater','管理员')
formData.append('file',_this.uploadFiles[0].raw)
const xhr = new XMLHttpRequest()
xhr.open('post','/upload/excel')
xhr.onreadystatechange = function() {
//---------可以注释
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
if (data.status === 200) { // 上传文件成功
// 将服务器返回的图片地址,设置为 <img> 标签的 src 属性
document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
} else { // 上传文件失败
console.log(data.message)
}
}
}
//----------
xhr.onerror = function(){
_this.$message.error('上传失败')
}
xhr.onload = function (evt){
const res = JSON.parse(evt.target.response)
//接口返回结果
}
//监听文件进度
xhr.upload.onprogress = function (event){
if(event.lengthComputable){
var percent = event.loaded/event.total *100
console.log('percent',percent);
}
}
xhr.send(formData)
}