アップロード コンポーネントはよく使われるのでカプセル化しました。実際にはオンライン上にたくさんありますが、自分で記録しておくとよいでしょう。
1.Element-Uiのアップロードコードを直接アップロード
ここではダイアログ ポップアップ ボックスで使用し、固定幅を使用しています。
<el-dialog :title="upload.title" :visible.sync="upload.open" width="600px">
<el-upload
class="test"
ref="upload"
:limit="1" // 最大允许上传个数
accept=".xlsx, .xls" // 允许上传的文件类型
:headers="upload.headers" // 设置上传的请求头部，传一个对象
:action="upload.url" // 必选参数，上传的地址
:disabled="upload.isUploading" // 是否禁用
:on-progress="handleFileUploadProgress" // 文件上传时的钩子
:on-change="showFile" // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
:data="uploadForm" // 上传时附带的额外参数,传一个对象
:on-success="handleFileSuccess" // 文件上传成功时的钩子
:auto-upload="false" // 是否在选取文件后立即进行上传,这个特别重要，意思是：你点击了文件上传，等下还要点击确定或者确认才会上传。传布尔值
drag // 是否启用拖拽上传
>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div slot="tip" class="el-upload__tip" style="color:red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false">取 消</el-button>
</div>
</el-dialog>
実際、上記のコメントはコンポーネント内に記述することはできませんが、一部のメソッドやパラメータを理解しやすくするためにここに記述されています。
2. データ内の一部の構成
// 引入文件
import {
getToken, getSid } from '@/utils/auth'
uploadForm: {
pch: '',
pcm: '',
zdyzt: ''
},
upload: {
// 是否显示弹出层
open: false,
// 弹出层标题
title: '',
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: {
uiticket: getToken(),
sid: getSid() || ''
},
// 上传的地址
url: (process.env.ENV === 'production' ? window.location.host + process.env.VUE_APP_BASE_API : process.env.VUE_APP_BASE_API) + 'xxxxxxxxxxxx'
},
三、方法方法
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true
},
// 其实也可以不用，我这里懒，直接复制过来了
showFile(file) {
this.$set(this.uploadForm, 'pcm', file.name.split('.')[0])
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false
this.upload.isUploading = false
this.$refs.upload.clearFiles() // 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
},
// 提交上传文件
submitFileForm() {
this.loading = true
this.$refs.upload.submit() // 上传，官方的示例也是这样的，在手动上传的例子那里有。
this.loading = false
},
4. スタイル
<style scoped lang="scss">
.test::v-deep .el-upload-dragger {
width: 560px;
}
</style>
それくらいです。パラメータを渡す必要がない場合は、パラメータを記述する必要はありません。