[JavaScript知识库]vue3使用原生input[type=‘file‘]上传文件

html页面

使用原生input[type=‘file’]，并绑定@change事件，当侦测到该元素选择的文件发生变化时触发上传文件事件

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required @change="changeFile">

常用属性

1. accept（限制可用文件类型）。
   比如限制只能上传jpg或png

   accept="image/png, image/jpeg"
   

2. multiple（多选文件）
   允许用户使用ctrl或者shift选择多个文件

   <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required @change="changeFile">
   

3. required（确保该元素值不为空）

js处理

从input[type=‘file’]获得的是一个blob对象
需要将其添加到表单格式FormData，然后进行上传。

1. 获取文件

   const file = e.target.files[0];
   

2. FormData格式

   formData.append('file',file);
   

3. 使用封装好的axios将其上传

   upload(formData).then(res=>{
       ElMessage.success('上传成功')
       console.log("res",res)
   })
   

分片上传

基本操作如上，只是将文件按指定大小分片并依次上传。
在获取到文件过后，需要知道文件的大小、文件名、后缀名，指定分片大小
指定分片大小为10MB

const file_size = (1024 * 1024) * 10;

//sliceFile为自定义分片并上传的函数
const changeFile = (e: any) => {
    // 获取文件
    const file = e.target.files[0];
    console.log("file::::", file);

    sliceFile(file, index);

}

sliceFile函数

    // 分多少片
    const file_len = Math.ceil(file.size / file_size);
    console.log("file_len::::", file_len);
    // 文件名和后缀名
    const [fname, fext] = file.name.split('.');
    console.log("file and fname:::", fname, fext)
    // 切片开始
    const slice_start = index * file_size;
    if (file.size <= slice_start) {
        console.log("切片完成");
        return
    }
    // 切片结束
    const slice_end = slice_start + file_size;
    // blobname
    const blobname = `${fname}_${index}.${fext}`;
    // 切片文件
    const blob = file.slice(slice_start, slice_end);
    // blob to file
    const blobfile = new File([blob], blobname)
    console.log("blob:::", blob)

    const form = new FormData();//定义集合方便后端接收
    form.append('file', blobfile);//将文件追加到集合中
    form.append('name', blobname);//将文件名追加到集合中
    form.append('size', blob.size);//将文件大小追加到集合中
    form.append('index', index.toString());//将文件索引追加到集合中

上传，也是在sliceFile中，依次上传

upload(form).then((res: any) => {
        console.log("第多少片：", index)
        percentage.value = (100 * index / file_len).toFixed(2);
        index++;
        if (index < file_len) {
            sliceFile(file, index);
        }
        else {
            percentage.value = 100
            console.log("结束了")
            return;
        }
        if (res.code == 0) {
            ElMessage.success("上传成功")
        }
    })

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系