基于Vue实现文件上传的几种实现方式

更新时间：2024年03月27日 09:24:50 作者：freshfish丶

文件上传是web开发中一个常见的需求,Vue.js作为一款流行的前端框架,也提供了方便的方法来实现文件上传功能,下面这篇文章主要给大家介绍了关于基于Vue实现文件上传的几种实现方式,需要的朋友可以参考下

文件上传的几种实现方式

form-data、base64、缩略图、进度条、拖拽上传、切片上传

1. Form-Data方式上传

主要使用form表单方式实现文件上传

let formData = new FormData();
console.log(this.file);
formData.append('file', this.file);
formData.append('filename', this.file.name);
instance.post('/upload_single', formData).then(res => {
    if (+res.code === 0) {
        this.fileTip = '图片上传成功!'
        return;
    }
    return Promise.reject(res.codeText);
}).catch(err => {
    console.log(err);
})

2. BASE64方式上传

使用FildReader获取文件的base64，将其上传

let base64 = await changeBase64(that.file);
try {
    const data = await instance
        .post('/upload_single_base64', {
            file: encodeURIComponent(base64), // 防止乱码
            filename: that.file.name
        },{
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            }
        })
    const { code } = data;
    if (code === 0) {
        this.fileTip = '文件上传成功!';
    }
    throw data.codeText; // 抛出异常
} catch (error) {
	console.log(error);
}

3. 文件缩略图显示，文件hash获取

根据文件内容展示缩略图(主要用于图片)，根据内容获取hash值判断后端是否存在该文件，节省上传时间

// 获取文件hash值
const changeBuffer = (file) => {
    return new Promise((resolve) => {
        let fileReader = new FileReader();
        fileReader.readAsArrayBuffer(file);
        fileReader.onload = (e) => {
            let buffer = e.target.result;
            const spark = new SparkMD5.ArrayBuffer();
            spark.append(buffer);
            const HASH = spark.end();
            const suffix = /\.([0-9a-zA-Z]+)$/.exec(file.name)[1];
            resolve({
                buffer,
                HASH,
                suffix,
                filename: `${HASH}.${suffix}`,
            });
        };
    });
};
// 展示缩略图
let base64 = await changeBase64(file);
upload_abber_img.src = base64;

4. 文件上传进度条实现

展示文件上传进度

try {
    let formData = new FormData();
    formData.append('file', this.file);
    formData.append('filename', this.file.name);
    const data = await instance.post('/upload_single', formData, {
        onUploadProgress: (e) => {
            const { loaded, total } = e;
            upload_progress.style.display = 'block';
            upload_progrees_value.style.width = `${ (loaded / total) * 100 }%`;
        },
    });
    if (+data.code === 0) {
        upload_progrees_value.style.width = `100%`;
        this.fileTip = '文件上传成功!'
        return;
    }
    throw data.codeText;
} catch (error) {
    console.log(e);
    this.fileTip = '文件上传失败!'
} finally {
    upload_progress.style.display = 'none';
    upload_progrees_value.style.width = `0%`;
}

5. 文件拖拽上传

使用原生JS事件 dragenter 、drop 、dragover 实现

dragenter(e) {
	e.preventDefault();
},
drop(e) {
	e.preventDefault();
    const {
        dataTransfer: { files },
    } = e;
    const file = files[0];
    this.fileTip = uploadFile(file);
},
dragover(e) {
    e.preventDefault();
},
uploadChange(e) {
    const file = e.target.files[0];
    this.fileTip = uploadFile(file);
},
    
const uploadFile = (file) => {
  const that = this;
  if (!file) {
    alert('请选择您要上传的文件~');
    return;
  }
  let formData = new FormData();
  formData.append('file', file);
  formData.append('filename', file.name);
  let flag = false;
  flag = instance
    .post('/upload_single', formData)
    .then(res => {
      if (res.code === 0) {
        return true;
      }
      return Promise.reject(res.codeText);
    })
    .catch(err => {
      console.log(err);
    })
  return flag ? '文件上传成功!': '文件上传失败!';
}

6. 大文件切片上传

首先确定上传规模数量，判断当前文件可以切出多少切片，
利用Bole.prototype.slice() 方法对文件进行切片并且对每个文件片作唯一标识(HASH)，
从服务器获取已经上传的切片，判断切片是否存在
将切片全部上传后，后端进行合并处理

let chunkList = [], 
    alreadyChunkList = [], 
    maxSize = 1024 * 1024,
    maxCount = Math.ceil(this.file.size / maxSize),
    index = 0;
const { HASH, suffix } = await this.fileHash(this.file);
if (maxCount > 10) {
    // 如果切片数量大于最大值
    maxSize =this.file.size / 10; // 则改变切片大小
    maxCount = 10;
}

while (index < maxCount) {
    chunkList.push({
        file: this.file.slice(index * maxSize, (index + 1) * maxSize),
        filename: `${HASH}_${index + 1}.${suffix}`,
    });
    index++;
}

// 先获取已经上传的切片
const data = await instance.post(
    '/upload_already',
    {
        HASH: HASH,
    },
    {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
    }
);
index = 0;

const clear = () => {
    upload_progress.style.display = 'none';
    upload_progrees_value.style.width = '0%'
}
const complate = async () => {
    index++;
    upload_progress.style.display = 'block';
    upload_progrees_value.style.width = `${ (index / maxCount) * 100 }%`;
    if (index < maxCount) {
        return;
    }
    upload_progrees_value.style.width = `100%`;
    try {
        let res = await instance
        .post('/upload_merge', 
              {
            HASH,
            maxCount
        }, 
              {
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }
             );
        if (res.code === 0) {
            this.fileTip = '大文件切片上传成功!';
            clear();
            return;
        }
        throw data.codeText;
    } catch (error) {
        clear();
    }
}

const { fileList } = data;
alreadyChunkList = fileList;
chunkList.forEach(item => {
    if (alreadyChunkList.length > 0 && alreadyChunkList.includes(item.filename)) {
        debugger
        // 切片已经存在
        complate()
        return;
    }
    const fm = new FormData();
    fm.append('file', item.file);
    fm.append('filename', item.filename);
    instance
        .post('/upload_chunk', fm)
        .then(data => {
        if (+data.code === 0) {
            complate();
            return;
        }
        return Promise.reject(data.codeText);
    })
        .catch(() => {
        this.fileTip = '上传失败';
        clear();
    })
});

源码 https://github.com/archer0621/fileUpload

总结

到此这篇关于基于Vue实现文件上传的几种实现方式的文章就介绍到这了,更多相关Vue实现文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue使用Three.js创建交互式3D场景的全过程
在现代Web开发中,通过在页面中嵌入3D场景,可以为用户提供更加丰富和交互性的体验,Three.js是一款强大的3D JavaScript库,它简化了在浏览器中创建复杂3D场景的过程,本文将介绍如何在Vue中使用Three.js,创建一个简单的交互式3D场景,需要的朋友可以参考下
2023-11-11
vue-cli启动本地服务局域网不能访问的原因分析
这篇文章主要介绍了vue-cli启动本地服务，局域网下访问不到的原因分析,在文中还给大家介绍了vue-cli起的webpack项目用localhost可以访问，但是切换到ip就不可以访问的原因，本文给大家介绍的非常详细，需要的朋友参考下
2018-01-01
vue3中使用swiper的完整版教程(超详细!)
工作中日常笔记,vue中使用swiper插件,在pc端和h5端也是常用的插件,下面这篇文章主要给大家介绍了关于vue3中使用swiper的完整版教程,需要的朋友可以参考下
2023-04-04
iView-admin 动态路由问题的解决方法
这篇文章主要介绍了iView-admin 动态路由问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-10-10
vite的proxy查看真实请求地址方式详解
这篇文章主要为大家介绍了vite的proxy查看真实请求地址方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
详解Vue文档中几个易忽视部分的剖析
针对Vue文档中部分大家可能不会去研读的内容，这篇文章主要介绍了详解Vue文档中几个易忽视部分的剖析，非常具有实用价值，需要的朋友可以参考下
2018-03-03
Vue安装依赖npm install时的报错问题及解决
这篇文章主要介绍了Vue安装依赖npm install时的报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
关于vue中根据用户权限动态添加路由的问题
每次路由发生变化时都需要调用一次路由守卫，并且store中的数据会在每次刷新的时候清空，因此需要判断store中是否有添加的动态路由，本文给大家分享vue中根据用户权限动态添加路由的问题，感兴趣的朋友一起看看吧
2021-11-11
浅析vue如何实现手机横屏功能
在项目开发中有时候需求需要手动实现横屏功能,所以这篇文章主要为大家详细介绍了如何使用Vue实现手机横屏功能,需要的小伙伴可以参考一下
2024-03-03
vue3中的watch()的用法和具体作用
这篇文章主要介绍了vue3中的watch()的用法和具体作用,通过合理和熟练使用watch()方法，开发者可以更加高效地完成前端开发工作，需要的朋友可以参考下
2023-04-04