需要满足重新定义上传参数(默认file)、自定义进度条
js
<el-upload
drag
action=""
:http-request="uploadFile"
:show-file-list="false"
accept=".apk"
:multiple="false">
<i class="el-icon-upload"></i>
<div class="el-upload__text">{{ form.url ? '如需重新上传,' : ''}}请将apk文件拖到此处,或<em>点击上传</em></div>
<el-progress style="width: 200px;margin: 8px auto 0;" :text-inside="true" :stroke-width="20"
v-if="progressPercent"
:percentage="progressPercent"/>
</el-upload>
uploadFile(item) {
const onUploadProgress = progressEvent => {
this.progressPercent = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
}
const form = new FormData()
form.append('fileName', fileObj)
uploadApk(form, onUploadProgress)
.then((res) => {
})
.catch(function (err) {
let res = err.response
this.$message.error(res.data.msg)
}).finally(() => {
this.progressPercent = ''
})
}
<el-upload
drag
action=""
:http-request="uploadFile"
:show-file-list="false"
accept=".apk"
:multiple="false">
<i class="el-icon-upload"></i>
<div class="el-upload__text">{{ form.url ? '如需重新上传,' : ''}}请将apk文件拖到此处,或<em>点击上传</em></div>
<el-progress style="width: 200px;margin: 8px auto 0;" :text-inside="true" :stroke-width="20"
v-if="progressPercent"
:percentage="progressPercent"/>
</el-upload>
uploadFile(item) {
const onUploadProgress = progressEvent => {
this.progressPercent = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
}
const form = new FormData()
form.append('fileName', fileObj)
uploadApk(form, onUploadProgress)
.then((res) => {
})
.catch(function (err) {
let res = err.response
this.$message.error(res.data.msg)
}).finally(() => {
this.progressPercent = ''
})
}
api示例:
js
import axios from "axios";
export function uploadApk(formData, onUploadProgress) {
const UploadInstance = axios.create({
baseURL: '',
headers: {
'Authorization': 'Bearer ' + getToken()
}
});
return UploadInstance.post(
'/xxx/uploadFile',
formData,
{
onUploadProgress
}
)
}
import axios from "axios";
export function uploadApk(formData, onUploadProgress) {
const UploadInstance = axios.create({
baseURL: '',
headers: {
'Authorization': 'Bearer ' + getToken()
}
});
return UploadInstance.post(
'/xxx/uploadFile',
formData,
{
onUploadProgress
}
)
}