当前位置：首页 > news >正文

Vue + View-ui-plus Upload实现手动上传

news 来源：原创 2024/9/20 9:30:46

本文实现Vue + Upload组件多文件手动上传，支持上传图片（image）、压缩文件(zip/rar)、表格(excel)、pdf

一、dom结构

<Row><Col :span="19"></Col><Col :span="2"><div class="ivu-btn-upload btn-white" style="color: #FB773B;" @click="handleDelImg">删除</div></Col><Col :span="3"><div class="ivu-btn-upload btn-orange" @click="handleUploadImg"><img src="@/assets/images/icon-img-upload.png" width="30" />上传影像</div></Col>
</Row>
<div class="image-ul-box"><div class="image-upload"><Uploadref="upload":show-upload-list="false":default-file-list="list":on-success="handleSuccess"accept="image/*,.xls,.xlsx,.pdf,.doc,.docx,.zip,.rar":format="['jpg','jpeg','png', 'xls', 'pdf', 'word','doc', 'docx' ,'xlsx', 'rar', 'zip']":on-format-error="handleFormatError":before-upload="handleBeforeUpload"multipleaction="#"style="display: inline-block;width:68px;"><div style="width: 68px;height:58px;line-height: 58px;"><!-- <Icon type="ios-add" size="50"></Icon> --><img src="@/assets/images/img-upload.png" width="50" /><p style="color: #bdbdbd;font-size: 16px;line-height: 1;">添加文件</p></div></Upload></div><div class="image-ul-li" v-for="item,index in list" :key="'image'+index"><div class="image-ul-li-img"><Image :src="item.url" fit="cover" width="100%" height="100%" /><div class="image-li-img-check" v-if="item.statusFlag == 0"><Checkbox v-model="item.check" /></div><div class="image-li-status" v-if="item.statusFlag == 0">未上传</div></div><p class="image-ul-li-txt"><Ellipsis :text="item.name" :length="10" tooltip /></p></div>
</div>

二、js方法

handleUploadImg() {let checkList = this.list.filter(item => item.check == true)if (checkList.length == 0) {this.$Message.error("请勾选需要上传的文件！")return}this.list.forEach(item => {if (item.check) {let formData = new FormData()formData.append("file", item.files)formData.append("businessNo", this.proposalNo)uploadFile(formData).then(res => {if (res.code == "0000") {let result = res?.result?.imgUrlsif (result.length > 0) {item.statusFlag = 1item.check = false}} else {this.$Message.error(res.message)}})}})},handleSuccess(file) {},handleFormatError(file) {this.$Message.error({background: true,content: '文件格式错误，请选择正确的文件重新上传！'});},handleBeforeUpload(file) {console.log(file, "11111111")let Maxsize = file.size > 30 * 1024 * 1024;if (Maxsize) {this.$Message.warning({content: '文件体积过大,图片大小不能超过30M'});return false}let imgTypeArr = ["image/png", "image/jpg", "image/jpeg", "image/gif"]let imgType = imgTypeArr.indexOf(file.type) !== -1if (imgType) {const reader = new FileReader()reader.readAsDataURL(file)reader.onload = (e) => {this.list.push({name: file.name,check: false,statusFlag: 0,url: reader.result,files: file})}} else {this.list.push({name: file.name,check: false,statusFlag: 0,url: this.getAssetsImgUrl(file.name.substr(file.name.lastIndexOf(".") + 1)),files: file})}return false},