基于 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>
标签：getFileList,fileName,params,Vue2,res,let,移动,上传 From： https://www.cnblogs.com/smile-fanyin/p/18554868