vue文件上传
vue上传文件
·
vue上传文件的思路:
上传文件是调用上传文件接口,上传成功后返回文件id,在提交表单时文件id和表单绑定。
原因:上传大文件时,提交表单不用等待,
<div>
<el-divider content-position="left">附件上传</el-divider>
<el-upload
class="upload-demo"
ref="upload"
action="#"
:http-request="uploadSectionFile"
:on-preview="handlePreview"
:before-upload="beforeUpload"
multiple
:on-exceed="handleExceed"
:show-file-list="false"
>
<el-button :loading="loading" size="small" type="primary">点击上传</el-button>
</el-upload>
<div style=" margin:15px 0px;border-top: 1px solid #EBEEF5;border-left: 1px solid #EBEEF5;border-right: 1px solid #EBEEF5;">
<el-table
ref="multipleTable"
:data="newAttachmentsTable"
tooltip-effect="dark"
style="width: 100%;"
>
<el-table-column
headerAlign="center"
align="left"
prop="name"
label="文件名">
</el-table-column>
<el-table-column
headerAlign="center"
align="center"
prop="size"
label="大小"
width="120">
<template slot-scope="scope">
<span v-if="scope.row.size/1024 < 1024">
{{ (scope.row.fileSize/1024).toFixed(1) }}KB
</span>
<span v-else-if="scope.row.size/1024 > 1024">
{{ ((scope.row.fileSize/1024)/1024).toFixed(1) }}MB
</span>
</template>
</el-table-column>
<el-table-column
headerAlign="center"
align="center"
prop="creatorName"
label="上传人"
width="120">
</el-table-column>
<el-table-column
headerAlign="center"
align="center"
prop="createTime"
label="上传时间"
width="120">
<template slot-scope="scope">{{ scope.row.createTime.slice(0,10) }}</template>
</el-table-column>
<el-table-column
label="操作"
headerAlign="center"
align="center"
width="200">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index,attachmentsTable)" type="text" size="small" style="color:red;">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div slot="tip" class="el-upload__tip">只能上传xls/xlsx/ppt/pptx/docx/doc/pdf/jepg/jpg/bmp/gif/png/zip/txt文件,且不超过20M</div>
</div>
// data上传附件
loading:false,
date: new Date(),
files:[],
newAttachmentsTable:[],
insert:true,
noPersonalInformation:[]
// 上传附件开始
uploadSectionFile(param) {
//创建临时的路径
this.loading = true
var windowURL = window.URL || window.webkitURL;
var filesArray = []
this.imgUrl = windowURL.createObjectURL(param.file);
let file = param.file
filesArray.push(file)
var formdata=new FormData();
filesArray.forEach(function (file) {
formdata.append('files',file);
})
const token = "tokenurl"
const url1 = "ajaxurl?token=" + token
axios({
url: url1,
method: 'post',
data: formdata,
headers:{
// 'Content-Type':'multipart/form-data',
'Content-Type':'multipart/form-data;boundary = ' + new Date().getTime(),
token: sessionStorage.getItem("token")
}
}).then(res=>{
try {
if(res.data.code == 200){
this.loading = false
res.data.data.forEach(value=>{
this.newAttachmentsTable.push(value)
})
this.newAttachmentsTable.forEach(value => {
var userInfo = JSON.parse(decodeURIComponent(sessionStorage.userInfo))
value.creatorName = userInfo.displayName
value.createTime = this.dateFormat('YYYY-mm-dd HH:MM:SS', this.date)
});
}
} catch (e) {
this.$message(e)
}
})
},
// 上传附件删除
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
// 上传限制
beforeUpload(file){
var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
const extension = testmsg === 'xls'
const extension2 = testmsg === 'xlsx'
const extension3 = testmsg === 'ppt'
const extension4 = testmsg === 'pptx'
const extension5 = testmsg === 'docx'
const extension6 = testmsg === 'doc'
const extension7 = testmsg === 'pdf'
const extension8 = testmsg === 'jpeg'
const extension9 = testmsg === 'jpg'
const extension10 = testmsg === 'bmp'
const extension11 = testmsg === 'gif'
const extension12 = testmsg === 'png'
const extension13 = testmsg === 'zip'
const extension14 = testmsg === 'txt'
const isLt2M = file.size / 1024 / 1024 < 20
if(!extension && !extension2 && !extension3 && !extension4 && !extension5 && !extension6 && !extension7 && !extension8 && !extension9 && !extension10 && !extension11 && !extension12 && !extension13 && !extension14) {
this.$message({
message: '上传文件只能是xls/xlsx/ppt/pptx/docx/doc/pdf/jpeg/jpg/bmp/gif/png/zip/txt格式!',
type: 'warning'
});
}
if(!isLt2M) {
this.$message({
message: '上传文件大小不能超过 20MB!',
type: 'warning'
});
}
return extension && isLt2M || extension2 && isLt2M || extension3 && isLt2M || extension4 && isLt2M || extension5 && isLt2M || extension6 && isLt2M || extension7 && isLt2M || extension8 && isLt2M || extension9 && isLt2M || extension10 && isLt2M || extension11 && isLt2M || extension12 && isLt2M || extension13 && isLt2M || extension14 && isLt2M
},
// 删除
deleteRow(index, rows) {
this.$nextTick(()=>{
this.newAttachmentsTable.splice(index, 1);
})
},
enclosureFun(id){
this.$axios.post("ajaxurl",{
id:id
}).then((res) => {
this.attachmentsTable = res.data.attachments
if( this.attachmentsTable == null){
this.downloadsShow = false
}else{
this.downloadsShow = true
}
})
},
更多推荐
已为社区贡献3条内容
所有评论(0)