1、上传附件组件
<el-form-item label="上传附件:">
<el-upload
ref="upload"
:disabled="isDisabled"
class="upload-demo"
:action="uploadUrl"
:limit="10"
multiple
:on-preview="handlePreview"
:on-exceed="handleHandleExceed"
:before-upload="beforeAvatarUpload"
:on-error="handleError"
:on-remove="handleRemove"
:file-list="fileList"
:on-change="fileChange"
:on-success="handleSuccess"
:auto-upload="false"
>
<!-- <el-button slot="trigger" size="small" type="primary" :disabled="isDisabled" @click="getUUIDToFn">选取文件</el-button> -->
<el-button slot="trigger" size="small" type="primary" :disabled="isDisabled">选取文件</el-button>
</el-upload>
<p style="color: #888;">最多上传10个.doc,.docx,.xls,.xlsx,.wps,.pdf,.txt,.bmp,.jpg,.png,.mp4,.zip,.tif,.tiff,.7z格式文件,且文件大小不能超过50M</p>
</el-form-item>
2、js代码
fileChange(file, fileList) {
this.getUUIDToFn()
this.fileList.push({
name: file.name,
attachId: this.uuid
})
this.uploadFileNew()
this.fileNum = this.$refs.upload.uploadFiles.length
},
uploadFileNew() { // 文件上传方法
const { uploadFiles } = this.$refs.upload
const form = new FormData()
let status = true
uploadFiles.forEach(item => {
if (fileVerify(item)) { // 校验上传文件格式
const size = (item.raw.size / (1024 * 1024)) <= 10
if (!size) { // 校验上传文件的大小
this.$message.warning(`${item.raw.name}大小超过10M`)
status = false
return
}
} else {
status = false
return
}
form.delete('file')
form.append('file', item.raw)
})
if (status) {
postByJson('/api/file/upload/upload-file?&ownSystem=notice¬eId=notice&ownBusiness=notice' + '&attachId=' + this.uuid, form).then(res => {
if (res.code !== 200) {
this.$message.error(res.message)
}
}).catch(() => {
})
}
},
handleSuccess(res, file) {
if (res.code === 200) {
this.saveLoading.close()
this.fileList.push({
name: file.name,
attachId: this.uuid,
url: res.data
})
this.addform.attachName = file.name
} else {
this.$message({
message: res.message,
type: 'error'
})
this.$refs.upload.uploadFiles.pop()
this.saveLoading.close()
}
},