vue文件上传
前言
今天写一篇关于文件上传的文章，其实对于真正工作的人来说，这不是很难的事，但对于新手来说无疑是个新技术
实现功能如下图
根据上传文件类型显示对应文件类型，图片直接显示，当然图片特可以做对应类型显示出来
下图红色可以删了，因为当时产品经理觉得不好看，换那种图片的，用蓝色的
图片链接
html
该功能是基于iview-ui 的Upload 上传
如果没下载提前安装到项目里
$npm install view-design --save
具体请点开 快速上手 这个链接
参数说明
<Form ref="form" :label-width="100">
<FormItem label="营业执照信息:">
<div class="fileBox">
<div v-for="(item,index) in fileList" :key="item.fileUrl">
<Card class="cardBox">
<div >
<div class="mdclose" @click="deleteFile(index)"><Icon type="md-trash" size="30" style="color: #ed4014;"></Icon></div>
<div class="file_eye" @click="fileLook(item.fileUrl)"><Icon type="md-eye" size="30" style="color: #19be6b;"></Icon></div>
</div>
<div style="text-align:center;height:140px;">
<img v-if="!['image/png', 'image/jpeg','image/jpg'].includes(item.fileType) " :src="item.iconType" width="80" height="80">
<img v-if="item.fileType == 'image/png' || item.fileType =='image/jpeg'|| item.fileType =='image/jpg' " :src="item.fileUrl" width="80" height="81">
<h4 class="title">{{item.fileName}}</h4>
</div>
</Card>
</div>
<div style="cursor: pointer;">
<!-- ***上传路径在这里action*** -->
<Upload action="/logistics-engine/shippingcompany/uploadFile" :headers="{Authorization: token}" :data="{id: ids?ids:''}"
:before-upload="beforeUpload" :on-success="uploadSuccessess" :on-error="uploadError" :show-upload-list="false"
accept=".xls,.xlsx,.jpg,.jpeg,.png,.pdf,.txt,.doc,.docx,.gif,.ppt,.pptx,.zip">
<div class="uploadStyle">
<Icon type="md-add" size="52" style="color: #c5c8ce"></Icon>
</div>
</Upload>
</div>
</div>
</FormItem>
</Form>
js
import { getToken } from '@/libs/util' // token
data() {
return {
form: {
code: '', // 公司代码
token: '', // Token
publicAttachments: null, // 营业执照
},
token: getToken(),// token 看你们上传是不是需不需要了
ids: '',
fileList: [], // 上传文件信息集合
attachmentIconPath: {
'default': require('@/assets/uploadFIle/fileUpload-file.png'),
pdf: require('@/assets/uploadFIle/fileUpload-pdf.png'),
txt: require('@/assets/uploadFIle/fileUpload-txt.png'),
zip: require('@/assets/uploadFIle/fileUpload-zip.png'),
doc: require('@/assets/uploadFIle/fileUpload-doc.png'),
docx: require('@/assets/uploadFIle/fileUpload-docx.png'),
ppt: require('@/assets/uploadFIle/fileUpload-ppt.png'),
pptx: require('@/assets/uploadFIle/fileUpload-pptx.png'),
xls: require('@/assets/uploadFIle/fileUpload-xls.png'),
xlsx: require('@/assets/uploadFIle/fileUpload-xlsx.png'),
jpg: require('@/assets/uploadFIle/fileUpload-jpg.png'),
png: require('@/assets/uploadFIle/fileUpload-png.png'),
gif: require('@/assets/uploadFIle/fileUpload-gif.png'),
jpeg: require('@/assets/uploadFIle/fileUpload-jpeg.png')
}
}
},
methods: {
fileLook(val) { // 预览文件 url 图片是预览，文件是下载
window.open(`${val}`)
},
deleteFile(idx) { // 删除文件
// 删除接口调用
shippingCompaniesOpt.deletePublicAttachment(this.fileList[idx].id).then(res => {
if (res.data.success) {
this.$Message.info('删除成功')
this.fileList.splice(idx, 1) // 删除成功之后把当前哪一张删除就OK了
this.form.publicAttachments = this.fileList
} else {
this.$Message.error(('删除失败:') + err.data.errorMsg || err.message || '服务端-500')
}
}).catch(err => {
this.$Message.error('删除失败:' + err.data.message)
})
},
beforeUpload(file) { // 上传之前的逻辑处理
if (this.fileList.length >= 3) { // 限制最多上传三张
this.$Message.error('最多支持上传三张')
return false
}
const fileExt = file.name.split('.').pop().toLocaleLowerCase()
if (['xlsx', 'xls', 'jpg', 'png', 'pdf', 'jpeg', 'txt', 'doc', 'docx', 'gif', 'ppt', 'pptx', 'zip'].includes(fileExt)) {
console.log('上传文件信息成功')
} else {
this.$Notice.warning({
title: '文件类型错误',
duration: 6,
desc:
'文件：' + file.name +
'不是想要的文件，请选择后缀为xlsx,xls,jpg,jpeg,png,pdf,txt,doc,docx,gif,ppt,pptx的文件上传。'
})
return false
}
},
uploadError(file) { //on-error 文件上传失败时的钩子
this.$Modal.error({ title: file.message })
},
uploadSuccessess(res) { // on-success 文件上传成功时的钩子
const _this = this
if (res.result && res.result.msg) {
return _this.$Message.success('上传文件失败')
}
if (res.success && res.result) {
let name = res.result.fileName.split('.')[1]
name = name in _this.attachmentIconPath ? name : 'default'
let list = Object.assign(res.result, { iconType: _this.attachmentIconPath[name] })
_this.fileList.push(list)
_this.form.publicAttachments = _this.fileList
return _this.$Message.success('上传文件成功')
} else {
_this.$Modal.error({ title: res.errorMsg })
}
}
}
css样式表
注意：这里用的less，如果你没装less环境，你就拆开就可以了，不用嵌套里面
<style lang="less" scoped>
.fileBox{
margin-bottom: 14px;
display: flex;
justify-content: flex-start;
flex-flow: wrap;
.cardBox{
width:170px;margin: 10px;
cursor: pointer;
position: relative;
.title{
word-wrap:break-word;
}
.mdclose{
// border: 1px solid red;
display: none;
text-align: center;
position: absolute;
right: 50px;
top: 50px;
}
.file_eye{
display: none;
position: absolute;
left: 50px;
top: 50px;
}
.eye_left{
left: 70px;
}
}
.cardBox:hover .mdclose, .cardBox:hover .file_eye{
display: block;
}
}
.uploadStyle{
padding: 20px 0;
width: 174px;
height: 170px;
line-height: 120px;
margin: 12px 10px;
border: 1px dashed #5cadff;
border-radius: 8px;
text-align: center;
&>.ivu-icon-ios-cloud-upload{
margin: 0 auto;
}
}
</style>
