在项目开发中有时需要手动上传图片,而不是选取图片后直接上传,官方文档给了个实例,但却没有给怎么实际手动上传的后续操作,直接上代码
<template>
<div>
<Upload
ref="upload"
:before-upload="handleUpload"
action="//jsonplaceholder.typicode.com/posts/">
<Button icon="ios-cloud-upload-outline">Select the file to upload</Button>
</Upload>
<div v-if="file !== null">Upload file: {{ file.name }} <Button type="text" @click="upload" :loading="loadingStatus">{{ loadingStatus ? 'Uploading' : 'Click to upload' }}</Button></div>
</div>
</template>
<script>
export default {
data () {
return {
file: null,
loadingStatus: false
}
},
methods: {
handleUpload (file) {
this.file = file;
return false;
},
upload () {
this.loadingStatus = true;
// 看这里
this.$refs.upload.post(this.file);
},
// 上传成功
handleSuccess(res, file) {
this.loadingStatus = false;
this.file = null;
this.$Message.success("数据导入成功!");
},
}
}
</script>