ElementUI实现文件手动上传
HTML部分
<el-upload
ref="upload"
:multiple="true"
:file-list="fileList"
:auto-upload="false"
:on-remove="removeControl"
:on-change="handleChange"
:http-request="fileUploads"
class="upload-demo" action="">
<el-button slot="trigger" size="small" type="primary">选取</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
<el-progress v-if="uploadProgressShow" :percentage="uploadPercent" :format="processFormat"></el-progress>
JS部分
<script>
import { fileUploadsController } from '@/api/appmgr'
export default {
name: 'AppMgr',
data() {
return {
loading: false,
fileList: [],
uploadPercent: 0,
uploadProgressShow: false
}
},
methods: {
processFormat(percentage) {
return `${percentage}%`
},
removeControl(file, fileList) {
console.log(file, fileList)
this.uploadProgressShow = false
this.uploadPercent = 0
},
handleChange(files, fileList) {
this.uploadProgressShow = false
this.uploadPercent = 0
if (fileList.length === 2) {
this.fileList = [files]
}
},
fileUploads(params) {
console.log(params)
const formData = new FormData()
formData.append('file', params.file)
this.uploadProgressShow = true
fileUploadsController(formData)
.then(res => {
console.log(res)
if (res.status === '200' && res.errcode === '0000') {
this.uploadPercent = 100
}
})
.catch(() => {
this.$message.error('上传出错')
})
},
submitUpload() {
this.$refs.upload.submit()
}
}
}
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)