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

本文实现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">
		<Upload
		    ref="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"
			multiple
			action="#"
			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?.imgUrls
							if (result.length > 0) {
								item.statusFlag = 1
								item.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) !== -1
			if (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
		},