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

雨季mo浅忆

已于 2023-07-14 16:50:03 修改

阅读量1.2k

点赞数

分类专栏：前端 Vue 文章标签：前端 Vue

于 2023-07-09 00:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_58099903/article/details/131603532

版权

前端同时被 2 个专栏收录

159 篇文章 29 订阅

订阅专栏

Vue

57 篇文章 4 订阅

订阅专栏

基于 Vue2 + Vant2 组件库实现：

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

主要代码：

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.uploaderList = [];
				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.fileName = this.getFileList[0]['fileName'];
						this.formFileData.newFileName =
							this.getFileList[0]['newFileName'];
						// this.quFileItem.fileObj.fileName =
						// 	this.getFileList[0]['fileName'];
						// this.quFileItem.fileObj.newFileName =
						// 	this.getFileList[0]['newFileName'];
						// 增加url值信息
						// this.quFileItem.fileObj.fileUrl =
						// 	this.getFileList[0]['url'];
						// Toast('上传成功');
						this.saveApi();
					} else if (code == '1') {
						if (res.msg) {
							let errMsg = res.msg;
							Toast(errMsg);
						}
						this.uploaderList = [];
					}
				})
				.catch((err) => {
					params.status = 'failed';
					params.message = '上传失败';
					console.log(err, 'err');
				});
		},
		// 保存上传背景接口
		async saveApi() {
			let data = {
				userId: this.formFileData.userId,
				name: this.fileName,
				type: 1, // 类型
				source: 1, // 来源
				newFileName: this.formFileData.newFileName, // 图片上传的新名称
			};
			let res = await uploadBackgroundFileApi(data);
			const { code } = res;
			if (code == '0') {
				Toast('上传成功');
			} else {
				Toast.fail('保存失败');
			}
		},
		// 下载附件
		downLoadFile() {
			if (this.getFileList.length == 0) return;
			window.localStorage.href = this.getFileList[0].url;
		},
		// 删除文件
		handleRemove() {
			this.uploaderList = [];
			this.tipMessage = '';
			this.fileName = '';
		},
	},

全部代码：

<!--
  作者：小灰狼
  时间：2023-07
  描述：附件题型
-->
<template>
	<div class="file-row">
		<van-field
			name="uploader"
			:rules="[
				{ required: quFileItem.isRequired, message: '请上传文件' },
			]"
		>
			<template #input>
				<van-uploader
					accept="*"
					v-model="uploaderList"
					: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="uploaderList.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';
import SessionStore from '@utils/SessionStore';
import { uploadBackgroundFileApi } from '@/api';

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',
			uploaderList: [], // 已上传的文件列表
			getFileList: [], // 存储已上传的文件信息
			isMessageTip: false, // 上传提示语是否展示
			tipMessage: '', // 上传提示语
			isShowFileList: false, // 是否展示文件列表
			formFileData: {
				userId: '', // 用户Id
				name: '默认',
				type: 1, // 类型
				source: 1, // 来源
				newFileName: '', // 图片上传的新名称
			},
		};
	},
	created() {
		this.formFileData.userId = SessionStore.get('userId');
		if (this.quFileItem && this.quFileItem.fileObj.fileName !== '') {
			this.isMessageTip = false;
			this.uploaderList = [
				{
					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.uploaderList = [];
				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.fileName = this.getFileList[0]['fileName'];
						this.formFileData.newFileName =
							this.getFileList[0]['newFileName'];
						// this.quFileItem.fileObj.fileName =
						// 	this.getFileList[0]['fileName'];
						// this.quFileItem.fileObj.newFileName =
						// 	this.getFileList[0]['newFileName'];
						// 增加url值信息
						// this.quFileItem.fileObj.fileUrl =
						// 	this.getFileList[0]['url'];
						// Toast('上传成功');
						this.saveApi();
					} else if (code == '1') {
						if (res.msg) {
							let errMsg = res.msg;
							Toast(errMsg);
						}
						this.uploaderList = [];
					}
				})
				.catch((err) => {
					params.status = 'failed';
					params.message = '上传失败';
					console.log(err, 'err');
				});
		},
		// 保存上传背景接口
		async saveApi() {
			let data = {
				userId: this.formFileData.userId,
				name: this.fileName,
				type: 1, // 类型
				source: 1, // 来源
				newFileName: this.formFileData.newFileName, // 图片上传的新名称
			};
			let res = await uploadBackgroundFileApi(data);
			const { code } = res;
			if (code == '0') {
				Toast('上传成功');
			} else {
				Toast.fail('保存失败');
			}
		},
		// 下载附件
		downLoadFile() {
			if (this.getFileList.length == 0) return;
			window.localStorage.href = this.getFileList[0].url;
		},
		// 删除文件
		handleRemove() {
			this.uploaderList = [];
			this.tipMessage = '';
			this.fileName = '';
		},
	},
};
</script>

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