基于Vue实现文件上传

最新推荐文章于 2024-06-06 14:35:00 发布

freshfish丶

最新推荐文章于 2024-06-06 14:35:00 发布

阅读量1w

点赞数 1

分类专栏：前端学习文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/qq_39064418/article/details/129983892

版权

文件上传的几种实现方式

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 = (</