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

基于 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>