点击刷新
例如
上传之后：
<el-form-item label="附件上传"
prop="attachmentId">
<el-upload ref="field117"
:limit="1" //限制只能上传一个附件
:file-list="fileList" //上传的文件列表，是一个数组，当清空时，记得将它改为 fileList=[ ]
:action="upload.url" //上传的地址
:before-upload="fieldBeforeUpload" //上传文件之前的钩子，限制文件大小等等
:headers="upload.headers" //设置上传的请求头部
:auto-upload="true" //是否在选取文件后立即进行上传
:on-progress="handleFileUploadProgress" //文件上传时的钩子
:on-success="handleFileSuccess" //文件上传成功时的钩子
:on-remove="handleRemove" //文件列表移除文件时的钩子
accept=".doc,.docx,.xls,.xlxs,.txt,.rar,.zip,.pdf" //接受上传的文件类型
>
<el-button size="small"
type="primary"
icon="el-icon-upload">点击上传</el-button>
<div class="el-upload__tip"
style="color: red"
slot="tip">
提示：仅允许上传“doc”，“docx”，“xls”，“xlxs”，“txt”，“rar”，“zip”,"pdf"等格式文件，并且文件大小不能超过20M！
</div>
</el-upload>
</el-form-item>
<script>
export default {
data(){
return{
fileList: [],
upload: {
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/common/upload",
},
},
methods:{
fieldBeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 20
if (!isRightSize) {
this.$message.error('文件大小超过 20MB')
}
return isRightSize
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true
},
// 文件上传成功处理，获取到attachmentId
handleFileSuccess(response, file, fileList) {
this.upload.isUploading = false
this.formData.attachmentId = response.fileId
},
// 移除文件
======================注意
handleRemove(file){
this.formData.attachAddress=""
this.formData.attachmentId=""
this.fileList=[]
this.formData.attachName=""
},
}
}
</script>
© 著作权归作者所有
举报
发表评论
0/200
