移动端Vue2实现文件图片上传功能

基于 Vue2 + Vant2 组件库实现 ：

废话不多说，直接看代码 ：

<!--
  作者：小灰狼
  时间：2023-07
  描述：附件题型
-->
<template>
	<div class="file-row">
		<van-field
			name="uploader"
			:rules="[
				{ required: quFileItem.isRequired, message: '请上传文件' },
			]"
		>
			<template #input>
				<van-uploader
					accept="*"
					v-model="uploader"
					:max-count="1"
					:max-size="100 * 1024 * 1024"
					:deletable="is_answered"
					:disabled="!is_answered"
					:before-read="beforeRead"
					:after-read="afterRead"
					@delete="handleRemove"
				>
					<van-button icon="upgrade" plain type="info"
						>上传文件</van-button
					>
				</van-uploader>
				<span
					style="color: #4e96ff"
					v-if="uploader.length > 0"
					@click="downLoadFile"
					>{
   
   { fileName }}</span
				>
				<div
					slot="tip"
					class="el-upload__tip"
					style="margin: 20px auto; color: red"
					v-show="isMessageTip"
				>
					{
   
   { tipMessage }}
				</div>
			</template>
		</van-field>
	</div>
</template>

<script>
import axios from 'axios';
import { Toast } from 'vant';

export default {
	props: {
		quFileItem: {
			type: Object,
			default: null,
		},
		is_answered: {
			// 控制禁用状态
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			fileName: '', // 上传文件名称
			// 上传文件格式
			acceptAllowFiles:
				'.png, .jpg, .jpeg, .gif, .bmp, .flv, .swf,.mkv,.avi,.rm,.rmvb,.mpeg,.mpg,.ogg,.ogv,.mov,.wmv,.mp4,.mp3,.webm,.wav,.mid,.zip,.xls, .xlsx, .doc, .docx, .rar',
			uploader: [], // 已上传的文件列表
			getFileList: [], // 存储已上传的文件信息
			isMessageTip: false, // 上传提示语是否展示
			tipMessage: '', // 上传提示语
			isShowFileList: false, // 是否展示文件列表
		};
	},
	created() {
		if (this.quFileItem && this.quFileItem.fileObj.fileName !== '') {
			this.isMessageTip = false;
			this.uploader = [
				{
					name: this.quFileItem.fileObj?.fileName,
					url: this.quFileItem.fileObj?.fileUrl,
				},
			];
			this.getFileList = [{ url: this.quFileItem.fileObj?.fileUrl }];
			this.fileName = this.quFileItem.fileObj?.fileName;
		}
	},
	methods: {
		beforeRead(file) {
			let arr = file.name.split('.');
			let fileType = '.' + arr[arr.length - 1].toLowerCase();
			const size = file.size / 1024 / 1024 > 100;
			if (this.acceptAllowFiles.includes(fileType)) {
				this.isShowFileList = true;
			} else {
				this.isShowFileList = false;
				this.isMessageTip = true;
				this.tipMessage = `不支持上传${fileType}类型的文件，请重新上传`;
				return;
			}
			if (size) {
				this.isMessageTip = true;
				this.tipMessage = '上传文件不能大于100M';
				this.uploader = [];
				return;
			}
			if (this.isShowFileList) {
				this.isMessageTip = false;
			}
			return true;
		},
		async afterRead(params) {
			// 创建FormData对象，上传图片需要转换二进制，这里要用到FormData
			let uploadFormData = new FormData();
			params.status = 'uploading';
			params.message = '上传中...';
			uploadFormData.append('files', params.file);
			axios
				.post('/file/uploadFile', uploadFormData, {
					headers: {
						'Content-Type': 'multipart/form-data',
					},
				})
				.then((res) => {
					let { code } = res || {};
					if (code == '0') {
						params.status = '';
						params.message = '';
						this.getFileList = res.result;
						this.quFileItem.fileObj.fileName =
							this.getFileList[0]['fileName'];
						this.quFileItem.fileObj.newFileName =
							this.getFileList[0]['newFileName'];
						this.fileName = this.getFileList[0]['fileName'];
						// 增加url值信息
						this.quFileItem.fileObj.fileUrl =
							this.getFileList[0]['url'];
						Toast('上传成功');
					} else if (code == '1') {
						if (res.msg) {
							let errMsg = res.msg;
							Toast(errMsg);
						}
						this.uploader = [];
					}
				})
				.catch((err) => {
					params.status = 'failed';
					params.message = '上传失败';
					console.log(err, 'err');
				});
		},
		// 下载附件
		downLoadFile() {
			if (this.getFileList.length == 0) return;
			window.localStorage.href = this.getFileList[0].url;
		},
		// 删除文件
		handleRemove() {
			this.uploader = [];
			this.tipMessage = '';
			this.fileName = '';
		},
	},
};
</script>

<style lang="scss" scoped></style>